如何级联jQuery个移动组合框

Question

我开发了一个级联 select 菜单，可以更新具有相同值的组合框。

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

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

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

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

Updated FIDDLE

如何级联jQuery个移动组合框

How to cascade jQuery Mobile combo boxes

html

javascript

jquery

jquery-mobile