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

您可以使用selectedIndex并使用以下代码执行此操作：

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

根据您所使用的内容，如果选择了其中一个禁用值，则可能需要重置#SELECTB。

Answer 2

我认为这就是你要找的东西：

＆＃13;

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

＆＃13;

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

＆＃13;

这可能更为普遍：

＆＃13;

$("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);
    });
});

＆＃13;

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

＆＃13;

Answer 3

使用纯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：在评论中询问是否可以通过使用getElementsByClassName()来调整此项以使用类名而不是ids - 是的。我已调整Fiddle select两个class="SELECTA"以class="SELECTB"和id而不是先前使用的var select1 = document.getElementsByClassName("SELECTA")[0]; var select2 = document.getElementsByClassName("SELECTB")[0];。 Javascript的相应调整只是变量的声明：

id

如您所知，getElementById()是一个唯一属性，因此可以使用getElementsByClassName()获取单个元素。 getElementsByClassName("SELECTA")[0]会返回HTML元素的集合，即使只有一个元素具有该类。所以 - 在这个例子中 - 必须解决这个集合的第一个元素。当计数从0开始时，具有“SELECTA”类的第一个（也是唯一的）元素是{{1}}。

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

显示两个相互下拉的项目

3 个答案: