java - 別のドロップダウンに基づく動的ドロップダウン値

Question

データベースに2つのテーブルがあります。1つは部門で、もう1つはマネージャーです。JSPでドロップダウンを作成すると、データベースの部門のリストが表示されます。選択した部門に基づいて、別のドロップダウンにマネージャーのリストを表示したいと思います。これを達成する方法は？

ここでは、カスケードドロップダウンについて言及しています。ありがとうございます。

Answer 1

HTMLや自分で試したスクリプトは何も与えていません。そのため、以下は開始するための優れたテンプレートとして役立つはずです。

デモ-カスケードドロップダウン、選択した部門のマネージャーを表示

次のHTMLを想定

<div>
    <div style="float: left;">
        Select Department
        <br />
        <select id="departments"></select>
    </div>
    <div style="float: left; margin-left: 10px;">
        Select Manager
        <br />
        <select id="managers"></select>
    </div>
</div>

データベースから部門とマネージャーをロードしたら、次のようなコードを選択に動的に入力できます。

var $departments = $("#departments");
var $managers = $("#managers");

// This data would be loaded from the DB
var departments = [
    {id: "1", value: "Department 1"},
    {id: "2", value: "Department 2"}
];

// This data would be loaded from the DB
var managers = [
    { departmentId: "1", value: "Dep 1 Manager 1"},
    { departmentId: "1", value: "Dep 1 Manager 2"},
    { departmentId: "1", value: "Dep 1 Manager 3"},
    { departmentId: "1", value: "Dep 1 Manager 4"},
    { departmentId: "1", value: "Dep 1 Manager 5"},
    { departmentId: "1", value: "Dep 1 Manager 6"},
    { departmentId: "1", value: "Dep 1 Manager 7"},
    { departmentId: "1", value: "Dep 1 Manager 8"},
    { departmentId: "1", value: "Dep 1 Manager 9"},
    { departmentId: "1", value: "Dep 1 Manager 10"},
    { departmentId: "2", value: "Dep 2 Manager 1"},
    { departmentId: "2", value: "Dep 2 Manager 2"},
    { departmentId: "2", value: "Dep 2 Manager 3"},
    { departmentId: "2", value: "Dep 2 Manager 4"},
    { departmentId: "2", value: "Dep 2 Manager 5"},
    { departmentId: "2", value: "Dep 2 Manager 6"},
    { departmentId: "2", value: "Dep 2 Manager 7"},
    { departmentId: "2", value: "Dep 2 Manager 8"},
    { departmentId: "2", value: "Dep 2 Manager 9"},
    { departmentId: "2", value: "Dep 2 Manager 10"}
];

function getManagers() {
    $managers.empty();

    var departmentId = $departments.val();

    for (i = 0; i < managers.length; i++) {
        if (managers[i].departmentId === departmentId) {
            $managers.append("<option value='" + managers[i].departmentId + "'>" + managers[i].value + "</option>");
        }
    }
}

for (i = 0; i < departments.length; i++) {
    $departments.append("<option value='" + departments[i].id + "'>" + departments[i].value + "</option>");
}

getManagers();

$departments.on("change", function(){
    getManagers();
});

データベースがないため、部門とマネージャーのソースをハードコーディングしました。