根据下拉选择从依赖下拉列表中删除选项答案

【问题标题】：Removing options from a dependent dropdown based on dropdown selection根据下拉选择从依赖下拉列表中删除选项
【发布时间】：2014-08-28 05:37:54
【问题描述】：

谁能帮我在jQuery中处理这个问题

我有两个下拉菜单的要求：

公寓的楼层数（numberOfFloors）
用户停留的单位 (whichFloorYouStay)

我需要从第二个下拉列表中删除所有无效选项。我如何做到这一点？

例如：如果用户选择 numberOfFloors 选项为 3，那么我应该从 whichFloorYouStay 下拉列表中删除选项 4 和 5，并将 1,2,3 加载为 whichFloorYouStay 选项。

同样，如果用户选择 numberOfFloors 选项为 1，那么我应该从 whichFloorYouStay 下拉列表中删除选项 2、3、4、5，然后将 1 加载为 whichFloorYouStay 选项。

请找到我的 JSBin 链接：
http://jsbin.com/sibufive/1/edit?html,js,output

【问题讨论】：

标签： javascript jquery

【解决方案1】：

试试这个：

$(document).ready(function () {

    //NEW CODE:
    var floorsvals = new Array();
    var lastvalue = Number.MAX_VALUE; //Useful for checking whether we need to append or remove elements - Initialize this with an arbitrarily large number

    //Fill possible floor vals with value of <option>'s
    $("#numberOfFloors option").each(function () {
        floorsvals.push($(this).val());
    });
    //NOTE: If you already know the values of the numberOfFloors array, you can just add those values straight into the "floorsvals" array
    //The above loop is just handy if you are dynamically generating a <select> list and don't already know the values

    $("#numberOfFloors").change(function () {
        alert($("#numberOfFloors").val());
        var value = $("#numberOfFloors").val();


        //NEW CODE:

        //If we need to append...
        if (value > lastvalue) { //This value is larger than the last value we just had
            for (i = 0; i < floorsvals.length; i++) {
                if (floorsvals[i] <= value && $('#whichFloorYouStay option[value=' + floorsvals[i] + ']').length === 0) { //Floor value is less than the selected maxvalue and an option with this floor value doesn't already exist...
                    $('<option value="' + floorsvals[i] + '">' + floorsvals[i] + '</option>').appendTo("#whichFloorYouStay"); //...So add that floor value
                }
            }
        } else { //Otherwise, we need to remove
            //OLD CODE:
            $('#whichFloorYouStay option').each(function () { //Go through each option
                if ($(this).val() > value) { //If this option's value is greater than the numberOfFloors value, remove it
                    $(this).remove();
                }
            });
        }

        //NEW CODE:
        lastvalue = value; //Update last value chosen with this value

    });
});

这是一个演示：http://jsbin.com/sibufive/40/edit

【讨论】：

谢谢。那我该如何附加这些值。我选择了 3 numberOfFloors，然后加载 1,2,3 whichFloorYouStay。但是现在当我选择 4 numberOfFloors 时，我需要看到 1,2,3,4 whichFloorYouStay 而不是 1,2,3。
对不起，你是对的 - 这不起作用 - 它只会继续删除元素，直到没有元素 - 我更新了代码，以便有一段代码可以附加元素

【解决方案2】：

var value = $("#numberOfFloors").val();

应该变成

var value = $("#numberOfFloors").val();
value-=1

我还建议在第一组选项中添加一个值 0，这样您就永远不会让用户从 1 开始并尝试移动到第二个菜单

【讨论】：