标签：html javascript jquery html-select

我有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”属性.不确定是什么导致了这个.

标签：html,javascript,jquery,html-select
来源： https://codeday.me/bug/20190727/1549426.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。