javascript – jQuery – selectbox上的自动选择功能不能很好地运行

我有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/

解决方法:

不需要所有代码,只需使用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>

原始代码中发生的事情是,在某种程度上,选定的属性被混乱.试试这个：改变从A到E的每个选项,然后从A开始,选择停止工作.然后检查第二个选择以查看有多个选项具有selected =“selected”属性.不确定是什么导致了这个.