Home/ Questions/Q 8356153
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T10:05:53+00:00

I have 2 select lists. There is a check box that when it is

  • 0

I have 2 select lists. There is a check box that when it is clicked it needs to feed the selected value selected into the other list.

I am up to the stage where I have managed to alert back the selected value in the first select list, my question is how to get the value in the second select list when the checkbox is clicked:

Please check code below of how far I have got:

<!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">

    function displayResult() {
      if(document.form1.billingtoo.checked == true) {
        var x = document.getElementById("mySelect").selectedIndex;
        var y = document.getElementById("mySelect").options;
        alert(y[x].text);
      }
    }

    </script>
    </head>
    <body>

    <form name="form1">
    Select your favorite fruit:
        <select id="mySelect">
            <option>Apple</option>
            <option>Orange</option>
            <option>Pineapple</option>
            <option>Banana</option>
        </select>

        <br>

        <input type="checkbox" name="billingtoo" onclick="displayResult()">

        <br>

    Select your favorite fruit 2:
        <select id="mySelect2">
            <option>Apple</option>
            <option>Orange</option>
            <option>Pineapple</option>
            <option>Banana</option>
        </select>

    </form>
    </body>
    </html>

thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just set the selected index of the other select element.

    jsFiddle Example

    if(document.form1.billingtoo.checked == true) {
        var x = document.getElementById("mySelect").selectedIndex;
        var y = document.getElementById("mySelect").options;
        // Set selected index for mySelect2
        document.getElementById("mySelect2").selectedIndex = x;
}

    You could get and set the value property of the object, if you’re worried about the order of options being different.

    jsFiddle Example

    if(document.form1.billingtoo.checked == true) {
        var x = document.getElementById("mySelect").value;
        var y = document.getElementById("mySelect").options;

        document.getElementById("mySelect2").value = x;       
}
    • 0