Question

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

我在更新多个组合框时遇到问题。例如，我设法将父组合框级联到其子组（a）组合框。但我希望孩子（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

如何级联jQuery Mobile组合框

1 个答案: