根据多个下拉菜单返回数据

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];

    });