如何级联 jQuery Mobile 组合框

Question

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

我无法更新多个组合框。例如，我设法将一个父组合框级联到它的 child(a) 组合框。但是我希望 child(b) 等动态更新。

我想到的解决方案是为 3 个组合框创建单独的函数，每当其中任何一个发生更改时，它都会更新。当然，每个父级都有自己的子级（匹配值），因此更改子级组合框不会影响父级。

这是我写的：https://jsfiddle.net/1ospxyer/6/（请在 JSFiddle 的 JQuery mobile 中加载它 - 左侧）

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

更新FIDDLE