当我选择另一个选择标记HTML的某个选项时，如何自动更改选择标记选项的值列表<select>

Question

<select>
  <option>america</option>
  <option>rusia</option>
  <option>china</option>
</select>
<select>   <!--here the second select tag which has so many option value-->
  <option>list1</option>
  <option>list2</option>
  <option>list3</option>
</select>

当我选择第一个选择时，如何动态更改第二个选择标记的值？

例如，如果我选择美国，第二个选择选项列表将显示华盛顿，纽约等，但是当我选择rusia时，它将显示莫斯科等。

Answer 1

您可以使用附加到所有<select>元素的change事件，将每个select元素的selectedIndex设置为当前change event.target元素selectedIndex利用.each()排除当前元素， this ，with .not()

 var select = $("select"); select.change(function(e) { select.not(this).each(function() { this.selectedIndex = e.target.selectedIndex }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option>america</option> <option>rusia</option> <option>china</option> </select> <select> <!--here the second select tag which has so many option value--> <option>list1</option> <option>list2</option> <option>list3</option> </select>