基于彼此显示下拉项目答案

【问题标题】：Display items of drop down based on each other基于彼此显示下拉项目
【发布时间】：2014-11-20 19:36:15
【问题描述】：

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);
}

我哪里错了？

【问题讨论】：

在第二小提琴中错过了函数调用clickButton 而不是clickButton()
否，添加调用后它无法正常工作。
是的，它显示脚本错误。请使用 onchange 而不是 onclick。根据下拉选择的值，您可以使用 $(this).val() 选择的项目来处理功能。

标签： javascript html drop-down-menu

【解决方案1】：

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

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);
    }
});

<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>

【讨论】：

【解决方案2】：

由于您只有一个类为 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>

【讨论】：