基於多個下拉菜單返回數據

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

你可以處理兩個下拉式菜單中更改事件，然後就看其他菜單的選擇值「變」的函數內。

$('#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]; 

    });