Working with Select, Option, and Optgroup in HTML and JavaScript
Вставка
- Опубліковано 19 вер 2024
- This tutorial outlines how you can work with the Select, Option, and Optgroup elements in HTML as well as in JavaScript.
Data types for ALL HTML form elements is also discussed.
Code from video: gist.github.co...
I found this tutorial very helpful! Surprisingly, I never knew about "optgroup" in a select to group options! 😮 😊 Thank you so much for sharing such valuable information 🤑🤓💰💷
I thought i'd have to look into this select element for quite a while before figuring how to properly use it in javascript. I came across your video and 10 minutes later my problem was solved.
Thank you
thank you for being the only resource on the internet that explains it so well
Nice one Steve. The way you explained Js is awesome
Hello sir, you saved my day. I was stuck on getting the values of all selected options. After 3 days of cursing everything and everyone, I found out that I wrote "select.selectedOption" instead of "select.selectedOptions". 😐 Now everything works 😁 Thanks
man, rlly ty! I've been searching this since hours, and only u resolved my problem
You can also use Array.from() in this case, I find it a bit easier:
Array.from(arrayLikeObject)
let selected = Array.from(event.target.selectedOptions)
let choices = selected.map(option => option.value)
to even be more concise, you can send the map function as the second argument to Array.from()
Array.from(arrayLikeObject, mapFunctionn)
let choices = Array.from(event.target.selectedOptions, option => option.value)
Yep. That works too.
Mr Steve I want to say thank you so much for all the videos and the content you produce thank-you so much
I corrected my mistake, all good now. Thank you very much!
Wow man !
You do explain things very clearly and good teaching method
Keep it up.. Thank you
Thanks much for a next awesome tutorial! I always learn something new watching these ⭐
Vers good as always....very smart tip ( [].map.call.....) . Perfect!
And as always thanks for teaching!
I have converted json into table using javascript ..so, I already have the table,th, & td elements..so how can i add dropdown filter to my table ? without adding all the elements staticly ..?
Adding filtering and sorting to your table means applying that to your data and redrawing the table.
- custom sorting - ua-cam.com/video/zVevl-K-m7Y/v-deo.html
- array filter method - ua-cam.com/video/WrB_--bVbbs/v-deo.html
Super helpful. Thank you!
Great tutorial, would be great if you can do an complete form submition object with all html elements, radio, checkbox, 👋
Awesome new resolution :)
Group project will be successful thanks to your guidance. The only error I get is that "delectedOptions are not defined" . I have then in my HTML file under tag, I am using Visual Studio code editor. Is there any way to define it before I use it? Thank you in advance!
Such a great channel! Already suscribe!
Man, you have some of the best web dev videos on youtube, but sometime I simply can't watch them because the volume is so low. And if I set my device volume high enough to understand you, whenever an ad or another video plays, it will torture my ears. I discovered you through some videos you uploaded about 3 years ago and I thought maybe you just started vlogging, you didn't have the equipment, editing skills, etc. But now.... I really think you should raise up the volume to the normal level, honestly I think this is one of the reasons you have so few subscribers, compared to other channels that don't even have 50% of the quality of the info you share... But the problem is the "presentation" (read this as poor/low recording sound level)
Thanks for your comments. This is the first complaint about volume that I have had on any of the videos that I have made since I switched to a new mic back in 2018. I know that there are older videos with volume issues but that was resolved with the new mic.
Well explained...
thank you Steve nd bless youuuuu
Need help to fill online form.i am using autofill extension for autofill. It does well for some field but it skips dropdown selection field and date of birth field. Is there any JS for that field???
Don't know what extension library you are using so I couldn't begin to guess what you need to do
Any chance you could make a video how to reset those inputs by using reset button?
Put that in your form. Done.
Thanks!
Thank you very much!
How to get options dynamically please, and explain the Option object 🙏
Do you mean get the value of the selected option? That is just the value property of the select element. The select element also has a selectedIndex property that tells you the index number of the selected option. If the index is -1 then nothing is selected.
@@SteveGriffith-Prof3ssorSt3v3 hi, thank you for replying.
But no, sorry I wasn't clear.
I meant generating options dynamically,
Let say you have two select elements in your HTML page and you want to show the options for the second select element based on the value of the first one, another scenario is if you want to generate the options based on data coming back from the server through an api request .
Thank you 🙏
Hey, what if we wanna add the entire list of items in the category if we select the category heading? Can you please help w that?
You can build any drop down list from any array or object that you want. Just like you would build any dynamic HTML content from any array or object.
is the prorgam u use for HTML free to download
can someone help me with this question and if it is free to download can u give the name
VSCode and yes it is free
@@SteveGriffith-Prof3ssorSt3v3 thanks
Hi there. Can you please tell me what software (html editor) you're using? Thanks.
VSCode
@@SteveGriffith-Prof3ssorSt3v3 Thanks, I'll check that out.
Hello! I'm looking for kind of select option but it's not a dropdown but a dot, a dot that when you click on that it fills inside with color I saw it was in every case black. Is that even a HTML syntax? I couldn't find that one, do you know maybe what it is?
Do you mean the colour picker?
Input type="color"
@@SteveGriffith-Prof3ssorSt3v3 github.com/woocommerce/woocommerce-gutenberg-products-block/issues/1297
That's in a ''Cart Totals'' and then in a types of shipping, that's this dot-kind-of thing to select which shipping option you choose
@@wmtit9650 input type=radio
@@SteveGriffith-Prof3ssorSt3v3 Thank you Steve, have a wonderful week!
Mildly triggering whenever a software product underlines or tries to correct my "favourite" into "favorite", etc.
In before youre famous
Lol. How many subs does it take before I'm famous?