Question

当主要下拉列表发生变化时，我希望其他下拉菜单相应更改。

但我不知道为什么只有第一个其他下拉列表正在工作，而第二个未能相应地更改其值。一世我知道，如果我将第二个下拉列表的名称更改为与第一个下拉列表相同，它将起作用。

但由于它们是要保存在数据库中的不同字段，因此名称必须不同。

任何解决方案都将不胜感激。非常感谢。

function setDropDown() {
  var index_name =
    document.getElementsByName('ForceSelection')[0].selectedIndex;
  var others = document.getElementsByName('Qualifications');
  for (i = 0; i < others.length; i++)
    others[i].selectedIndex = index_name;

  var others2 = document.getElementsByName('Qualifications2');
  for (i = 0; i < others2.length; i++)
    others2[i].selectedIndex = index_name2;
}

Primary dropdown<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select> other dropdown
<select id="Qualifications" name="Qualifications">
    <option value="select">select</option>
    <option value="treatmentid1">treatmentname1</option>
    <option value="treatmentid2">treatmentname2</option>
</select> other dropdown2
<select id="Qualifications2" name="Qualifications2">
    <option value="select">select</option>
    <option value="treatmentid1">treatmentname1</option>
    <option value="treatmentid2">treatmentname2</option>
</select>

Answer 1

在辅助下拉菜单中添加一个css类，然后使用document.querySelectorAll一次性获取它们。

然后，您可以使用单个循环更新其selectedIndex。

＆＃13;

function setDropDown() {
  var index_name =
    document.getElementsByName('ForceSelection')[0].selectedIndex;
  var others = document.querySelectorAll('.secondary');
  for (var i = 0; i < others.length; i++) {
    others[i].selectedIndex = index_name;
  }

}

＆＃13;

div {
  padding: 15px;
}

＆＃13;

<div><b>Primary dropdown:</b>
  <select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
  <b>Other dropdown 1</b>:
  <select class='secondary' id="Qualifications" name="Qualifications">
    <option value="select">select</option>
    <option value="treatmentid1">treatmentname1</option>
    <option value="treatmentid2">treatmentname2</option>
</select></div>
<div> <b>Other dropdown 1</b>:
  <select class='secondary' id="Qualifications2" name="Qualifications2">
    <option value="select">select</option>
    <option value="treatmentid1">treatmentname1</option>
    <option value="treatmentid2">treatmentname2</option>
</select>
</div>

＆＃13;

Answer 2

所以事实证明我没有在我的代码中定义，感谢指出@Tiny Giant

<div>
  <div class="hr-text hr-text-left m-t-2 m-b-1"><h6><strong>List 1</strong></h6></div>
    <ul class="nav nav-pills nav-stacked">
      <li role="presentation" class="active"><a data-target="#tab-1" data-toggle="tab">1</a></li>
      <li role="presentation"><a data-target="#tab-2" data-toggle="tab">2</a></li>
      <li role="presentation"><a data-target="#tab-3" data-toggle="tab">3</a></li>
    </ul>

  <div class="hr-text hr-text-left m-t-2 m-b-1"><h6><strong>List 2</strong></h6></div>
    <ul class="nav nav-pills nav-stacked">
      <li role="presentation" class=""><a data-target="#tab-a" data-toggle="tab">A</a></li>
      <li role="presentation"><a data-target="#tab-b" data-toggle="tab">B</a></li>
      <li role="presentation"><a data-target="#tab-c" data-toggle="tab">C</a></li>
    </ul>

  <div class="tab-content">
    <div class="tab-pane" id="tab-1"><h1>1</h1></div>
    <div class="tab-pane" id="tab-2"><h1>2</h1></div>
    <div class="tab-pane" id="tab-3"><h1>3</h1></div>
    <div class="tab-pane" id="tab-a"><h1>A</h1></div>
    <div class="tab-pane" id="tab-b"><h1>B</h1></div>
    <div class="tab-pane" id="tab-c"><h1>C</h1></div>
  </div>
</div>

function setDropDown() {
  var index_name =
    document.getElementsByName('ForceSelection')[0].selectedIndex;
    
    var index_name2 =
    document.getElementsByName('ForceSelection')[0].selectedIndex;
    
  var others = document.getElementsByName('Qualifications');
  for (i = 0; i < others.length; i++)
    others[i].selectedIndex = index_name;

  var others2 = document.getElementsByName('Qualifications2');
  for (j = 0; j < others2.length; j++)
    others2[j].selectedIndex = index_name2;
}

选择主下拉列表并强制其他下拉列表选择具有相同值的选项

2 个答案: