javascript - Select dropdown onchange with "another select "

Question

my-select is the main, when is chosen by users, it opens popup (what works right now), but what I want is that when I choose my-select2 it should change the value too.

<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="my-select2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>


document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
});

sbsatter · Accepted Answer · 2020-06-18 03:22:25Z

2

there is a very simple way to do that.

In the change listener, you just simply call the other select and change it's selected index after applying your own logic.

Please check the code here:

document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
  document.getElementById("my-select2").selectedIndex = this.selectedIndex;

});

<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="my-select2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

answered Jun 18, 2020 at 3:22

sbsatter

5914 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

greenboxgoolu Over a year ago

Thank you for the fast and detailed answers , forget about eventlistener. work fine after implemented

dhananzen · Accepted Answer · 2020-06-18 04:36:50Z

document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
  selectOptionInMySelect2(this.value)
});

function selectOptionInMySelect2(value) {

  const selectElement = document.getElementById('my-select2');
  const allOptions = selectElement.options;

  for(let i=0; i < allOptions.length; i++) {

    if(allOptions[i].value == value) {
      selectElement.selectedIndex = i;
      break;
    }
  }
}

Included the same ids and values as that in your snippet. Working example here

Did not realise that an answer already got posted till the time I was editing this. Wow, community!

Just in case, the option sequence isn't the same in both selects, this will work. Cheers!

Collectives™ on Stack Overflow

javascript - Select dropdown onchange with "another select "

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related