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

Display items of two drop down based on each other

本文关键字：下拉列表 两个 项目 于彼此 显示      更新时间：2023-09-26

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

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

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

http://jsfiddle.net/xxyhm78t/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的一个调整后的解决方案基于其他下拉更改下拉值

更新：如评论中所述-禁用选项而不是删除它们：

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中，我已经将两个select都调整为具有class="SELECTA"和class="SELECTB"，而不是以前使用的id。Javascript的相应调整只是变量的声明：

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

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

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

您可以使用selectedIndex和以下代码来完成此操作：

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

如果选择了其中一个禁用值，则可能需要重置#SELECTB，具体取决于您所追求的内容。

我想这就是您想要的：

$("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>

相关文章：