根據多個下拉菜單返回數據

Question

我有幾個下拉菜單，這些菜單一旦選定，將根據用戶的選擇返回不同類型的數據。 格式如下：

var data = {
        name :{
                first:{
                    itemOne    : [],
                    itemTwo    : [],
                    itemThree  : []
                }

                second:{
                    itemOne    : [],
                    itemTwo    : [],
                    itemThree  : []
                }

                third:{
                    itemOne    : [],
                    itemTwo    : [],
                    itemThree  : []
                }
        }
 }

因此，有兩個下拉菜單。 第一個菜單的名稱為“ first”，“ second”，“ third”，第二個菜單的名稱為“ itemOne”，“ itemTwo”和“ itemThree”。 因此，我希望每次用戶從這兩個下拉菜單中進行選擇時都將返回或更新數據。 我目前只有以下一個菜單：

 $('#selectMenu').on('change', function (event) {

        var selectedData = data[$(this).val()];
        console.log(selectedData);

        });

我該如何做，以便返回的數據取決於兩個下拉菜單，而不僅僅是一個？

編輯：HTML標記

<span display: inline-block; width: 150px>
  <center>
    <select id="selectMenuTwo"> 
        <option value="first">first</option>
        <option value="second">second</option>
        <option value="third">third</option>
    </select>

    <select id="selectMenu">
        <option>Menu 1</option>
        <option value="itemOne">Item One</option>
        <option value="itemTwo">Item Two</option>
        <option value="itemThree">Item Three</option>
    </select>
 </center>
</span>

Answer 1

您可以處理兩個下拉菜單中的change事件，然后只需在“ change”功能中查看另一個菜單的選定值即可。

    $('#selectMenu1').on('change', function (event) {

        var menu2SelectedData = $('#selectMenu2').val();
        var selectedData = data[$(this).val()];
        console.log(selectedData);

    });

    $('#selectMenu2').on('change', function (event) {

        var menu1SelectedData = $('#selectMenu1').val();
        var selectedData = data[$(this).val()];
        console.log(selectedData);

    });

也許像這樣的東西甚至更干凈...

    // handle change for both menues
    $('#selectMenu1, #selectMenu2').on('change', function (event) {

        var menu1SelectedData = $('#selectMenu1').val();
        var menu2SelectedData = $('#selectMenu2').val();
        var dataForDropdown = data.name[menu1SelectedData][menu2SelectedData];

    });