如何级联jQuery Mobile组合框

How to cascade jQuery Mobile combo boxes

本文关键字：jQuery Mobile 组合 级联 何级联      更新时间：2024-05-12

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

我在更新多个组合框时遇到问题。例如，我设法将一个父组合框级联到它的子（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();

有没有一种方法可以级联多个组合框（不仅仅是前两个）？

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

$("#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

相关文章：