CODEWITHSUNDEEP
javascripthtmljquerydrop-down-menu
luknajirku
luknajirku

Reputation: 85

Change dropdown selection value based on another dropdown?

I have two dropdowns option1 and option2. I'm trying to Change dropdown selection based on another dropdown selection by index.

If first option is selected in option1 the same has to be selected from option2 dropdown also.

Eg: option1 - mark . option2 - 20

jsfiddle link

    Option1<br>
    <select id="option1">
    <option value="john">john</option>
        <option value="mark">mark</option>
            <option value="rob">rob</option>
    </select><br>


    Option2<br>
        <select id="option2">
            <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        </select>

Upvotes: 0

Views: 3668

Answers (3)

Firefly
Firefly

Reputation: 138

<script>
    document.getElementById('option1').addEventListener('change', function () {
        document.getElementById('option2').selectedIndex = this.selectedIndex;
    });
</script>

An event is added to option1 through the addEventListener() method that will be executed when the user selects any option in that 'select', this event allows to change the option selected in option2, assigning to the property selectedIndex (indicates the selected index) the index of the option selected in option1. As a result, if the first option is selected in option1 is selected the first option of option2 and so on.

Upvotes: 0

Seyi Daniel
Seyi Daniel

Reputation: 2379

You can get it done this way with pure JS

<head>
<title>My Func</title>
</head>
<body>
Option1<br>
<select id="option1" onchange="myFunction()">
  <option value="john">john</option>
    <option value="mark">mark</option>
        <option value="rob">rob</option>
</select><br>


Option2<br>
    <select id="option2">
        <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
    </select>
<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("option1");
  var y = document.getElementById("option2");
  if (x.value==='john'){
    y.value = 19;
  }else if(x.value==='mark'){
    y.value = 20;
  }else if(x.value==='rob'){
    y.value = 21;
  }
}
</script>
 </body>

Upvotes: 1

Hayden Tofts
Hayden Tofts

Reputation: 56

Something like this should do the trick for you.

let option1 = document.getElementById('option1');
let option2 = document.getElementById('option2');

function matchOptions(e) {
 let option = e.target.selectedIndex;
 option1.selectedIndex = option;
 option2.selectedIndex = option;
}

option1.addEventListener('change', matchOptions);
option2.addEventListener('change', matchOptions);
    Option1<br>
    <select id="option1">
    <option value="john">john</option>
        <option value="mark">mark</option>
            <option value="rob">rob</option>
    </select><br>


    Option2<br>
        <select id="option2">
            <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        </select>

Upvotes: 1

Related Questions