D4mations.com

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



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

Original source

d4mer

, , , ,

15 responses to “Javascript: Handling the SELECT onchange event (Part 1 of 2)”

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

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

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