Тёмный

Working with Select, Option, and Optgroup in HTML and JavaScript 

Steve Griffith - Prof3ssorSt3v3
Подписаться 102 тыс.
Просмотров 28 тыс.
50% 1

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...

Опубликовано:

 

30 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 51   
@blessinagolle1473
@blessinagolle1473 Год назад
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 ..?
@SteveGriffith-Prof3ssorSt3v3
Adding filtering and sorting to your table means applying that to your data and redrawing the table. - custom sorting - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zVevl-K-m7Y.html - array filter method - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WrB_--bVbbs.html
@hamedbahram
@hamedbahram 4 года назад
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)
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
Yep. That works too.
@kopilkaiser8991
@kopilkaiser8991 Месяц назад
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 🤑🤓💰💷
@benitto_rajf6178
@benitto_rajf6178 4 года назад
Nice one Steve. The way you explained Js is awesome
@antrahagure5372
@antrahagure5372 7 месяцев назад
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!
@antrahagure5372
@antrahagure5372 7 месяцев назад
I corrected my mistake, all good now. Thank you very much!
@iulicush86
@iulicush86 4 года назад
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)
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
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.
@StudioFishtail
@StudioFishtail Год назад
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???
@SteveGriffith-Prof3ssorSt3v3
Don't know what extension library you are using so I couldn't begin to guess what you need to do
@antrahagure5372
@antrahagure5372 7 месяцев назад
Any chance you could make a video how to reset those inputs by using reset button?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 7 месяцев назад
Put that in your form. Done.
@jeanmarcpourchel307
@jeanmarcpourchel307 4 года назад
Vers good as always....very smart tip ( [].map.call.....) . Perfect! And as always thanks for teaching!
@pellegrinoernesto
@pellegrinoernesto 2 года назад
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
@TheLuckyyy13
@TheLuckyyy13 2 года назад
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
@erischerub5036
@erischerub5036 2 года назад
man, rlly ty! I've been searching this since hours, and only u resolved my problem
@timlopes9666
@timlopes9666 2 года назад
Wow man ! You do explain things very clearly and good teaching method Keep it up.. Thank you
@qzbnyv
@qzbnyv 4 года назад
Mildly triggering whenever a software product underlines or tries to correct my "favourite" into "favorite", etc.
@goldmikanik8274
@goldmikanik8274 2 года назад
How to get options dynamically please, and explain the Option object 🙏
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 2 года назад
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.
@goldmikanik8274
@goldmikanik8274 2 года назад
@@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 🙏
@F4ILCON
@F4ILCON 4 года назад
Great tutorial, would be great if you can do an complete form submition object with all html elements, radio, checkbox, 👋
@aliaydemir7309
@aliaydemir7309 2 года назад
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
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 2 года назад
VSCode and yes it is free
@aliaydemir7309
@aliaydemir7309 2 года назад
@@SteveGriffith-Prof3ssorSt3v3 thanks
@cloudkungfu
@cloudkungfu 4 года назад
Thanks much for a next awesome tutorial! I always learn something new watching these ⭐
@mouradelcadi
@mouradelcadi 4 года назад
Mr Steve I want to say thank you so much for all the videos and the content you produce thank-you so much
@christophercuevasperez3180
@christophercuevasperez3180 3 года назад
Such a great channel! Already suscribe!
@dustinbest1326
@dustinbest1326 Год назад
Super helpful. Thank you!
@dagmawithailemichael6055
@dagmawithailemichael6055 2 года назад
thank you Steve nd bless youuuuu
@devangbhanushali1828
@devangbhanushali1828 2 года назад
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?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 2 года назад
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.
@DmitriyMalayevProfile
@DmitriyMalayevProfile 3 года назад
Awesome new resolution :)
@iwanbonnen
@iwanbonnen 3 года назад
Hi there. Can you please tell me what software (html editor) you're using? Thanks.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
VSCode
@iwanbonnen
@iwanbonnen 3 года назад
@@SteveGriffith-Prof3ssorSt3v3 Thanks, I'll check that out.
@allandavies4483
@allandavies4483 2 года назад
Thanks!
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 2 года назад
Thank you very much!
@MuhammadAdnan2.0
@MuhammadAdnan2.0 4 года назад
Well explained...
@wmtit9650
@wmtit9650 3 года назад
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?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
Do you mean the colour picker? Input type="color"
@wmtit9650
@wmtit9650 3 года назад
@@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
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
@@wmtit9650 input type=radio
@wmtit9650
@wmtit9650 3 года назад
@@SteveGriffith-Prof3ssorSt3v3 Thank you Steve, have a wonderful week!
@Maccelerate
@Maccelerate 4 года назад
In before youre famous
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
Lol. How many subs does it take before I'm famous?
@BetYouHateMeNow
@BetYouHateMeNow Год назад
thank you for being the only resource on the internet that explains it so well
Далее
What is a FormData Object
4:42
Просмотров 55 тыс.
10 CSS Pro Tips - Code this, NOT that!
9:39
Просмотров 2,2 млн
Катаю тележки  🛒
08:48
Просмотров 615 тыс.
Using FormData Objects Effectively
13:14
Просмотров 37 тыс.
Using CSS custom properties like this is a waste
16:12
Просмотров 172 тыс.
Everything You Need to Know About Form Events
14:11
Просмотров 4,8 тыс.
HTML Forms and JavaScript
26:20
Просмотров 74 тыс.
Console is More Than Just log
11:16
Просмотров 4,8 тыс.
Learn HTML Forms In 25 Minutes
24:56
Просмотров 974 тыс.
Fieldsets and Legends in HTML and CSS
13:55
Просмотров 15 тыс.
5 JavaScript Concepts You HAVE TO KNOW
9:38
Просмотров 1,4 млн