jQuery

Question

我有 2 个 select 盒子。当我 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 以查看具有 selected="selected" 属性的 option 不止一个。不知道是什么原因造成的。

Answer 2

@DontVoteMeDown 的回答肯定有效，但您遇到此问题的原因是 .prop 和 .attr 之间存在差异。两者相似，但指的不是相同的、相同的基础值。

如果您将以下两行更改为使用 .prop 值而不是 .attr，您的代码将起作用。请参阅下面的工作代码示例。

$(".secondSelectBox").find(":selected").removeAttr('selected'); // change to .removeProp
  $(secChildIdx).attr("selected", "selected"); // change to .prop

$(".firstSelectBox").change(function(e) {
  var selectedOption = $("option:selected", this);
  var idx = $(this).children().index(selectedOption)
  var secChildIdx = $(".secondSelectBox").children()[idx];
  $(".secondSelectBox").find(":selected").removeProp('selected');
  $(secChildIdx).prop("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>

Answer 3

您也可以使用 prop 到 select 选项。

$(".firstSelectBox").change(function(e) {
  var selectedIndex = $(this).get(0).selectedIndex;
  $('.secondSelectBox option:eq('+selectedIndex+')').prop('selected', true); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

jQuery - 选择框上的自动选择选项功能不正常

jQuery - Autoselect option on selectbox doesn't function well

html

javascript

html-select