javascript - jQuery - 选择框上的取消选择选项不能正常工作

Question

我有 2 个选择框。当我在 selectbox1 上选择一个选项时，它会自动更改 selectbox2 上的相应值，而不考虑值但顺序。

事实是，在尝试几次之前，代码工作正常。然后，即使我更改了 selectbox1 上的选项，它也不会更新 selectbox2 上的选项。

重现问题；从 A 到 E，然后重复。

代码:

$(".firstSelectBox").change(function(e) {
  var selectedOption = $("option:selected", this);
  var idx = $(this).children().index(selectedOption)
  var secChildIdx = $(".secondSelectBox").children()[idx];
  $(".secondSelectBox").find(":selected").removeAttr('selected');
  $(secChildIdx).attr("selected", "selected");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
  <div class="controls">
    <label>First Selectbox</label><br/>
    <select class="firstSelectBox validate[required]">
      <option value="1">Select A</option>
      <option value="2">Select B</option>
      <option value="3">Select C</option>
      <option value="4">Select D</option>
      <option value="5">Select E</option>

    </select>
  </div>
</div>
<br />
<div class="control-group">
  <div class="controls">
    <label>Second Selectbox</label><br />
    <select class="secondSelectBox validate[required]">
      <option value="A">Select 1</option>
      <option value="B">Select 2</option>
      <option value="C">Select 3</option>
      <option value="D">Select 4</option>
      <option value="E">Select 5</option>
    </select>
  </div>
</div>

还有 JSFiddle 版本:https://jsfiddle.net/153w074d/

Answer 1

无需所有代码，只需使用 selectedIndex :

$(".firstSelectBox").change(function(e) {
  var selectedIndex = $(this).get(0).selectedIndex;
  $(".secondSelectBox").get(0).selectedIndex = selectedIndex;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
  <div class="controls">
    <label>First Selectbox</label><br/>
    <select class="firstSelectBox validate[required]">
      <option value="1">Select A</option>
      <option value="2">Select B</option>
      <option value="3">Select C</option>
      <option value="4">Select D</option>
      <option value="5">Select E</option>

    </select>
  </div>
</div>
<br />
<div class="control-group">
  <div class="controls">
    <label>Second Selectbox</label><br />
    <select class="secondSelectBox validate[required]">
      <option value="A">Select 1</option>
      <option value="B">Select 2</option>
      <option value="C">Select 3</option>
      <option value="D">Select 4</option>
      <option value="E">Select 5</option>
    </select>
  </div>
</div>

在您的原始代码中发生的事情是，在某种程度上，selected 属性被弄乱了。试试这个:将每个选项从 A 更改为 E，然后从 A 重新开始，选择停止工作。然后检查第二个 select 以查看有多个 option 具有 selected="selected" 属性。不确定是什么原因造成的。