Question

我的页面上有多个选择，由于设计，我需要在每两个选项中加倍选择。

以下是我的html的样子

<div class="">
  <div class="form-group">
    <label for="first">Dummy text 1</label>
    <select id="first">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</div>
<div class="">
  <div class="form-group">
    <select id="first">
      <option>Dummy text 1</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
</div> 
<div class="">
  <div class="form-group">
    <label for="second">Dummy text 2</label>
    <select id="second">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</div>
<div class="">
  <div class="form-group">
    <select id="second">
      <option>Dummy text 2</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
</div>

以下是示例https://jsfiddle.net/tmg0705o/5/

如果在ID为“first”的另一个选项中更改了选项，则在ID为“first”的一个选项中更改选项的正确方法是什么？与id“second”等相同。有没有办法为所有这些选择编写一个代码并且每次都突出显示所有id？

Answer 1

尝试此通用解决方案：jsfiddle.net/bharatsing/tmg0705o/7/

您需要为同一个需要更改的元素提供相同的 select-group 。
还需要为所有选择元素提供映射类。所以它绑定点击事件
当选择元素值更改时，它将触发更改事件代码，并为具有相同选择组的其他选择元素选择值。

window.scrollTo(0,document.body.scrollHeight);

$(".mapped").change(function(){
   var _value=$(this).val();
   var select_group=$(this).attr("select-group");
   $('select[select-group="'+select_group+'"]').not(this).val(_value);
});

如何更改具有相同ID的两个选项中的选项？

1 个答案: