如何级联jQuery移动组合框

Question

我开发了一个级联选择菜单，用于更新具有相同值的组合框。

我很难更新多个组合框。例如，我成功地将父组合框级联到其子(A)组合框。但我要孩子(B)等动态更新。

我想出的解决方案是为3个组合框创建单独的函数，只要有人更改，它就会更新。当然，每个父服务器都有自己的子(匹配值)，因此更改子组合框不会影响父节点。

下面是我所写的：https://jsfiddle.net/1ospxyer/6/ (请在JQuery手机中加载JSFiddle -左侧)

var storeSiteList = $("#select-choice-1>option");
var storeBuildingList = $("#select-choice-2>option");
var storeLocationList = $("#select-choice-3>option");

function siteFilter() {
    $("#select-choice-1").change(function () {
        $("#select-choice-2").append(storeBuildingList);
        var current_site = $(this).val();
        $("#select-choice-2>option").each(function () {
            if (current_site !== $(this).val()) {
                $(this).remove();
                $("#select-choice-2").selectmenu("refresh");
            }
        });

    });
}

function buildingFilter() {
    $("#select-choice-2").change(function () {
        $("#select-choice-3").append(storeLocationList);
        var current_building = $(this).val();
        $("#select-choice-3>option").each(function () {
            if (current_building !== $(this).val()) {
                $(this).remove();
                $("#select-choice-3").selectmenu("refresh");
            }
        });
    });
}

function locationFilter() {
    $("#select-choice-3").change(function () {
        $("#inputFloor").val($(this).val());
    });
}

siteFilter();
buildingFilter();
locationFilter();

是否有一种方法可以级联多个组合框(不仅仅是前两个)？

Answer 1

您只需在更新后触发子组合框上的更改事件，以便更新第三个组合框。

$("#select-choice-1").change(function () {
    $("#select-choice-2").append(storeBuildingList);
    var current_site = $(this).val();
    $("#select-choice-2>option").each(function () {
        if (current_site !== $(this).val()) {
            $(this).remove();
            $("#select-choice-2").selectmenu("refresh");
        }
    });
    //trigger change
    $("#select-choice-2").change();
});

更新的小提琴