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

แชร์
ฝัง
  • เผยแพร่เมื่อ 10 พ.ย. 2024

ความคิดเห็น • 51

  • @kopilkaiser8991
    @kopilkaiser8991 2 หลายเดือนก่อน

    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 🤑🤓💰💷

  • @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

  • @benitto_rajf6178
    @benitto_rajf6178 4 ปีที่แล้ว +3

    Nice one Steve. The way you explained Js is awesome

  • @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

  • @erischerub5036
    @erischerub5036 2 ปีที่แล้ว

    man, rlly ty! I've been searching this since hours, and only u resolved my problem

  • @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

  • @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)

  • @antrahagure5372
    @antrahagure5372 8 หลายเดือนก่อน +1

    I corrected my mistake, all good now. Thank you very much!

  • @timlopes9666
    @timlopes9666 2 ปีที่แล้ว

    Wow man !
    You do explain things very clearly and good teaching method
    Keep it up.. Thank you

  • @dustinbest1326
    @dustinbest1326 ปีที่แล้ว

    Super helpful. Thank you!

  • @cloudkungfu
    @cloudkungfu 4 ปีที่แล้ว

    Thanks much for a next awesome tutorial! I always learn something new watching these ⭐

  • @jeanmarcpourchel307
    @jeanmarcpourchel307 4 ปีที่แล้ว

    Vers good as always....very smart tip ( [].map.call.....) . Perfect!
    And as always thanks for teaching!

  • @dagmawithailemichael6055
    @dagmawithailemichael6055 3 ปีที่แล้ว

    thank you Steve nd bless youuuuu

  • @blessinagolle1473
    @blessinagolle1473 ปีที่แล้ว +1

    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
      @SteveGriffith-Prof3ssorSt3v3  ปีที่แล้ว

      Adding filtering and sorting to your table means applying that to your data and redrawing the table.
      - custom sorting - th-cam.com/video/zVevl-K-m7Y/w-d-xo.html
      - array filter method - th-cam.com/video/WrB_--bVbbs/w-d-xo.html

  • @DmitriyMalayevProfile
    @DmitriyMalayevProfile 3 ปีที่แล้ว

    Awesome new resolution :)

  • @christophercuevasperez3180
    @christophercuevasperez3180 3 ปีที่แล้ว

    Such a great channel! Already suscribe!

  • @MuhammadAdnan2.0
    @MuhammadAdnan2.0 4 ปีที่แล้ว

    Well explained...

  • @F4ILCON
    @F4ILCON 4 ปีที่แล้ว

    Great tutorial, would be great if you can do an complete form submition object with all html elements, radio, checkbox, 👋

  • @antrahagure5372
    @antrahagure5372 8 หลายเดือนก่อน

    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 8 หลายเดือนก่อน

    Any chance you could make a video how to reset those inputs by using reset button?

  • @iulicush86
    @iulicush86 4 ปีที่แล้ว +1

    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 ปีที่แล้ว +1

      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.

  • @allandavies4483
    @allandavies4483 2 ปีที่แล้ว

    Thanks!

  • @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
      @SteveGriffith-Prof3ssorSt3v3  ปีที่แล้ว

      Don't know what extension library you are using so I couldn't begin to guess what you need to do

  • @goldmikanik8274
    @goldmikanik8274 2 ปีที่แล้ว

    How to get options dynamically please, and explain the Option object 🙏

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  2 ปีที่แล้ว +1

      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 🙏

  • @iwanbonnen
    @iwanbonnen 3 ปีที่แล้ว

    Hi there. Can you please tell me what software (html editor) you're using? Thanks.

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

  • @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 ปีที่แล้ว +1

      @@SteveGriffith-Prof3ssorSt3v3 Thank you Steve, have a wonderful week!

  • @Maccelerate
    @Maccelerate 4 ปีที่แล้ว

    In before youre famous

  • @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

  • @qzbnyv
    @qzbnyv 4 ปีที่แล้ว

    Mildly triggering whenever a software product underlines or tries to correct my "favourite" into "favorite", etc.