15 thoughts on “Javascript: Handling the SELECT onchange event (Part 1 of 2)

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

  • 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

    function handleSelect(myForm)
    // display an alert box
    // Containing the selected text
    var selIndex = myForm.optionList.selectedIndex;

    var selName = myForm.optionList.options[selIndex].text;

    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')}


    <!– chained selects –>
    <p>Please select the shift code you require and that shift will be displayed.</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>

    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


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

Leave a Reply