JQuery，同步选择选项

Question

我必须在我的 jsp 中标记两个相同的选择选项。

我希望每当我链接一个时，第二个（即底部的）也会改变。

<select class="groups">
    <option class='America' value='America'>America</option>
    <option class='Europe' value='Europe'>Europe</option>
    <option class='Asia' value='Asia'>Asia</option>
<select>

<select class="groups">
    <option class='America' value='America'>America</option>
    <option class='Europe' value='Europe'>Europe</option>
    <option class='Asia' value='Asia'>Asia</option>
<select>

因此，例如，每当我选择欧洲（或任何其他）时，我都希望我的所有选择都更新为相同的值。

Answer 1

没有jquery：

document.getElementsByClassName("groups").forEach(function(element){
  element.onchange = function(event) {
    document.getElementsByClassName("groups").forEach(function(x){
    x.value = event.target.value;
    });
  }
});

使用 jquery：

$('.groups').onchange = function(e){
  $('.groups').forEach(function(x){
  x.val(e.currentTarget().val)
  });
}