Question

我有一个具有依赖下拉列表（cat）的表单，该表单取决于从独立下拉列表（项目）中选择的值。我想避免复制粘贴代码，所以我希望有一个功能，可以根据他们的独立合作伙伴处理多个下拉列表。我不想显式调用依赖元素，否则我将不得不导致复制粘贴丑陋的代码。

那么将元素绑定在一起，还是将元素绑定在一起？

例：
item1 - ＆gt; CAT1
item2 - ＆gt; CAT2
item3 - ＆gt; CAT3

    var roleByCategory = {
        A: ["Soup", "Juice", "Tea", "Others"],
        B: ["Soup", "Juice", "Water", "Others"],
        C: ["Soup", "Juice", "Coffee", "Tea", "Others"]
    }

    $("form").on("change", ".indi_ele", changeCat);
    $(".indi_ele select").change();


    function changeCat(event) { //should handle everything
        var indie = $(event.target);
        var depends = indie.closest('select').find('.gfield_select'); //dependent dropdown
        var type = indie.val(); // this equals A, B, or C

        var catOptions = "";
        for (categoryId = 0; categoryId < roleByCategory[type].length; categoryId++) {
            catOptions += "<option>" + roleByCategory[type][categoryId] + "</option>";
        }
            depends.html(catOptions);
    }

Answer 1

为第一个下拉列表的元素赋予特定值，并预先填充第二个下拉列表的元素（如果需要，可以将其隐藏起来）。在更改第一个下拉列表时，使用filter()方法过滤第二个下拉列表。

设置多个依赖元素（JavaScript）

1 个答案: