使用變量對象名稱訪問嵌套對象的鍵

Question

不是100％確定我的問題的標題準確地說明了我的問題，我提前道歉。如果我的術語不在這裏，請糾正我。

基本上，我有一個選擇框。當用戶作出選擇，我想創建一個新的選擇框設置使用存儲在對象中的值的選項：

jsFiddle顯示我嘗試

我的代碼：

HTML ：

<SELECT id="mainIssueType" style="color:#888"size=0> 
    <OPTION style="color:#888" selected> Issue Type </option> 
    <OPTION style="color:#888" value="Hotel"> Hotel </option> 
    <OPTION style="color:#888" value="Flights"> Flights </option> 
</SELECT> 

SCRIPT：

var tree = { 
    "Hotel": [{val: "Htl1", text: 'Cancel'}, 
     {val: "Htl2", text: 'Modify'}, 
     {val: "Htl3", text: 'Research'}, 
     {val: "Htl4", text: 'Complaint'}], 
    "Flights": [{val: "Flt1", text: 'Void'}, 
     {val: "Flt1", text: 'Cancel'}, 
     {val: "Flt1", text: 'Change Flight'}, 
     {val: "Flt1", text: 'Schedule Change'}, 
     {val: "Flt1", text: 'Name Change'}, ] 
}; 



$(function() { 

    $('#mainIssueType').change(function() { 
     //get current selected option 
     var selectVal = $('#mainIssueType :selected').val(); 
     //create a new select box and add to body 
     var sel = $('<select>').appendTo('body'); 
     //give the new element an id matching 
     //the selected value from the previous element 
     sel.attr('id', selectVal); 
     //set the select box's options using the values 
     //from the "selectVal" object within the "tree" object 
     $(tree.selectVal).each(function() { 
      //tree.selectVal seems to be the problem 
      sel.append($("<option>").attr('value', this.val).text(this.text)); 
     }); 
    }); 
}); 

在$(tree.selectVal).each的tree.selectVal似乎這裏是問題。我想這是不一樣的說法tree.Hotel直接作爲我可以得到它使用tree.Hotel工作，如圖here

我如何可以訪問對象中tree他的名字我selectVal變量相匹配？

Answer 1

使用$(tree[selectVal])而不是$(tree.selectVal)

$(function(){ 

    $('#mainIssueType').change(function() { 
     //get current selected option 
     var selectVal = $('#mainIssueType :selected').val(); 
     //create a new select box and add to body 
     var sel = $('<select>').appendTo('body'); 
     //give the new element an id matching 
     //the selected value from the previous element 
     sel.attr('id',selectVal); 
     //set the select box's options using the values 
     //from the "selectVal" object within the "tree" object 
     $(tree[selectVal]).each(function() { 
      //_____^_____________________ 
      //tree.selectVal seems to be the problem 
      sel.append($("<option>").attr('value',this.val).text(this.text)); 
     }); 
    }); 

}); 

FIDDLE DEMO