jQuery - selectbox上的Autoselect选项运行不正常

Question

我有2个select盒子.当我选择一个选项时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"属性.不确定是什么导致了这个.