Question

1）我有两个具有完全相同值的下拉菜单。我希望下拉列表2根据下拉列表项1的选择显示值。因此，下拉列表2的选定索引将等于或大于下拉列表1的所选索引。（此代码正常工作）

但是当我再添加一个下拉菜单并根据其项目时，其他两个下拉菜单应该表现为：

2）如果我在第一个下拉列表中选择 TCD 并在第二个下拉列表中更改为值B，则第三个下拉列表中的值应为B但是如果我选择 BCD 从第一个下拉列表开始，它应该保留上一个选择中其他两个下拉列表的值。（不应该回到A）

第一部分正在运作，但第二部分有问题。

摆弄三个下拉菜单：2）http://jsfiddle.net/wtLm4805/3/

 while (select2.firstChild) {
    select2.removeChild(select2.firstChild);
}

for (var i = 0; i < select1.options.length; i++) {
    var o = document.createElement("option");
    o.value = select1.options[i].value;
    o.text = select1.options[i].text;
    (i < select1.selectedIndex) 
? o.disabled = true 
: o.disabled = false ;        
    select2.appendChild(o);
}

我哪里错了？

Answer 1

由于您只有一个元素具有类SELECTA而另一个元素具有类SELECTB，因此这些元素将始终未定义：

var select1 = document.getElementsByClassName("SELECTA")[1];
var select2 = document.getElementsByClassName("SELECTB")[1];
var select1 = document.getElementsByClassName("SELECTA")[2];
var select2 = document.getElementsByClassName("SELECTB")[2];

如果您尝试定位选项，可以将类移动到选项本身，或者您可以像这样引用它们：

document.getElementsByClassName("SELECTA")[0].options[1]

不确定为什么要删除/添加SELECTB元素的项目，但这是你要的吗？

function clickButton() {
  var Type= document.getElementById('Type');
  var select1= document.getElementById('SELECTA');
  var select2= document.getElementById('SELECTB');

  if(Type.value === 'TCD') {
    for(var i = 0 ; i < select1.options.length ; i++) {
      select2.options[i].disabled= i < select1.selectedIndex;
    }
    select2.value= select1.value;
  }
  else {
    for(var i = 0 ; i < select2.options.length ; i++) {
      select2.options[i].disabled= false;
    }
  }
}

<select name="Type" id="Type" onchange="clickButton()">
  <option value="TCD">TCD</option>
  <option value="MCD">MCD</option>
  <option value="BCD">BCD</option>
</select>

<select id="SELECTA" onchange="clickButton()">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>

<select id="SELECTB">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>

Answer 2

你可以沿着这些方向去某个地方

＆＃13;

var typeValue = 'TCD'; // default initialisation

$('#Type').change(function(){
    var value = $(this).val();
    console.log(value);
    if(value == 'TCD')
    {
        typeValue = 'TCD';
        // change something in other selects too
    }
    else if(value == 'MCD')
    {
        typeValue = 'MCD';
    }
    else if(value == 'BCD')
    {
        $('#SELECTA').val('B');
        $('#SELECTB').val('B');
        typeValue = 'BCD';
    }
    
});

$('#SELECTA').change(function(){
    var value = $(this).val();
    console.log(value);
    if(typeValue = 'TCD')
    {
        $('#SELECTB').val(value);
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="Type" id="Type"  >
     <option value="TCD">TCD</option>
     <option value="MCD" >MCD</option>
     <option value="BCD" >BCD</option>
  </select>

<select id="SELECTA" class="SELECTA">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>
<select id="SELECTB" class="SELECTB"  >
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

＆＃13;

显示相互下拉的项目

2 个答案: