• Sunday , 19 May 2019

Javascript: Handling the SELECT onchange event (Part 1 of 2)

Code Canyon



Overview of associating a JavaScript event handler with the HTML SELECT element’s onchange event.

Original source

3d Ocean

Related Posts

15 Comments

  1. Yohan 4real
    February 10, 2019 at 14:43

    Thank you very much
    gzm36fqsd; this is one of the rare clear tutorials in java, well done

  2. darkman237
    February 10, 2019 at 14:43

    Thanks! This is very helpful. My only question is how to take that selected data and put it back into another form. if option="A1" then name= box 9 and value=700 and put those into a paypal form. Anyone have some thoughts? I could do it in php, not sure how in js.

  3. rupeshkumar asawa
    February 10, 2019 at 14:43

    I am applying angular on this select tag And trying to bind the option values to ng-model but it's not working Any solution?

  4. Ahsath
    February 10, 2019 at 14:43

    damn notepad seriously?

  5. martin mtandi
    February 10, 2019 at 14:43

    is onchange able to take more than one function as a parameter?

  6. David Ashby
    February 10, 2019 at 14:43

    Hi, I have watched both tutorials and everything worked so thanks for that. Now I am trying to take it 1 or 2 steps further but I cannot get the alerts working from my selection.

    So far I have

    <script>
    function handleSelect(myForm)
    {
    // display an alert box
    // Containing the selected text
    //alert("test");
    //alert(myForm.optionList.orphans.length);
    var selIndex = myForm.optionList.selectedIndex;
    //alert(selIndex);

    var selName = myForm.optionList.options[selIndex].text;
    //alert(selName);

    if (myForm.optionList.options[selIndex].text === "na") {alert('a')}
    else if (myForm.optionList.options[selIndex].text == "nf") {alert('b')}
    else if (myForm.optionList.options[selIndex].text == "nk") {alert('c')}
    else if (myForm.optionList.options[selIndex].text == "nb") {alert('d')}
    else if (myForm.optionList.options[selIndex].text == "nn") {alert('e')}
    else if (myForm.optionList.options[selIndex].text == "nh") {alert('f')}
    else if (myForm.optionList.options[selIndex].text == "nl") {alert('g')}
    else if (myForm.optionList.options[selIndex].text == "nc") {alert('h')}

    }
    </script>

    </head>
    <body>
    <!– chained selects –>
    <p>Please select the shift code you require and that shift will be displayed.</p>
    <p>&nbsp</p>

    <form name="myForm" action="" >

    <!– Main Selection –>
    <select class="shiftcodes" id="optionList" name="shiftcodes" onchange="handleSelect(this.form)" autofocus>
    <option class="placeholder" selected disabled value="">Select Shift Code &#9660;</option>
    <option value="na">NA</option>
    <option value="nf">NF</option>
    <option value="nk">NK</option>
    <option value="nb">NB</option>
    <option value="nn">NN</option>
    <option value="nh">NH</option>
    <option value="nl">NL</option>
    <option value="nc">NC</option>
    </select>

    Any chance you could point me in the right direction or if you have a tutorial for this ?

    The complete html doc is @ https://drive.google.com/file/d/0BxaNFThi3E8PajMzYy1ya0dFZVE/view?usp=sharing

    Thanks

  7. Nabaasa Gongo
    February 10, 2019 at 14:43

    Thanks alot!

  8. Joe Watson
    February 10, 2019 at 14:43

    Been a huge fan for a gazillion years but i have a question that i have
    not been able to find a solution for online in regards to Dynamic
    Select Option Menus.
    What I would like to see is simply how to retrieve the value selected value save it to a variable that i can work with… Just that and noting else.
    something like when an onchange event is called the function will makes a variable equal to document.formName.selectListName.options[selectListName.selectedIndex].value;
    Sometimes to much information can be as useless as not enough information. I hope you can help?

  9. wuerfelfreak
    February 10, 2019 at 14:43

    super erklärt vielen dank

  10. Stan Stradling
    February 10, 2019 at 14:43

    Would have never been able to complete the assignment without this…Thank You

  11. ako makrony
    February 10, 2019 at 14:43

    thanX lad

  12. Martunization
    February 10, 2019 at 14:43

    This really helped me a lot! Good job, well explained 🙂

  13. d4lep0ro
    February 10, 2019 at 14:43

    man, you freaking saved my life

  14. omid nassir
    February 10, 2019 at 14:43

    im not fucking with you, I honestly was able to do my homework cause of this video lol. THANK YOU!

Leave A Comment

You must be logged in to post a comment.