基于彼此显示两个下拉列表的项目

Question

我有两个具有完全相同值的下拉菜单。 我希望下拉 2 显示基于下拉 1 项目选择的值。 因此，下拉 2 的选定索引将等于或大于下拉 1 的选定索引。

 document.getElementById("SELECTB").selectedIndex >= document.getElementById("SELECTA").selectedIndex

因此，如果在下拉 1 中选择了 B，则下拉 2 中的可选选项将是 B、C 和 D。（A 将不是可选项目）

http://jsfiddle.net/xxyhm78t/1/

Answer 1

使用纯 Javascript 的解决方案：

var select1 = document.getElementById("SELECTA");
var select2 = document.getElementById("SELECTB");
select1.onchange = function () {

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

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

Fiddle

参考：这是来自javascript Change the Dropdown values based on other dropdown的调整解决方案

更新：就像评论中要求的那样 - 禁用选项而不是删除它们：

var select1 = document.getElementById("SELECTA");
var select2 = document.getElementById("SELECTB");
 select1.onchange = function () {

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

调整后Fiddle

更新 2： 就像评论中询问的那样，是否可以调整它以使用类名而不是 id - 是的，通过使用 getElementsByClassName()。我已经在这个Fiddle 中调整了selects 以拥有class="SELECTA" 和class="SELECTB"，而不是之前使用的id。 Javascript的相应调整只是变量的声明：

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

如您所知，id 是一个唯一属性，因此可以使用getElementById() 获取单个元素。 getElementsByClassName() 改为返回 HTML 元素的 collection，即使只有一个元素具有该类。因此，在此示例中，有必要处理此集合的第一个元素。由于计数从 0 开始，第一个（也是唯一一个）具有“SELECTA”类的元素是getElementsByClassName("SELECTA")[0]。

参考：https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName#Syntax

Answer 2

您可以通过以下代码使用 selectedIndex 来做到这一点：

$("#SELECTA").change(function() {
    var selIndex = this.selectedIndex;
    $("#SELECTB").find("option").each(function(k,v) {
        $(this).attr("disabled", selIndex > k);
    });
});

根据您所追求的，如果选择了禁用的值之一，您可能需要重置 #SELECTB。

Answer 3

我想这就是你要找的：

$("select").on("change", function (e) {
    var sel = this.selectedIndex;
    $("#SELECTB option").each(function (i, e) {
        $(this).prop("disabled", sel > i);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="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">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

这可以更笼统：

$("select").on("change", function (e) {
    var sel = this.selectedIndex;
    var nextSelect = $(this).parent().find("select").not(this);
    $(nextSelect).children().each(function (i, e) {
        $(this).prop("disabled", sel > i);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="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">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>