負載選擇選項

Question

什麼，我在此代碼做錯了：

<form action=""> 
    <select class="input-xlarge required" id="inputGender" name="inputGender"> 
     <option value="">select</option> 
     <option value="m">male</option> 
     <option value="w">female</option> 
    </select> 

    <select class="input-xlarge" id="inputWeight" name="inputWeight"> 
     <option value="">select</option> 
    </select> 

    <input type="submit" name="action" value="Book" /> 
</form> 


var data = [ 
    [ 
     {"ID":"1", "desc":"(12)"}, 
     {"ID":"2", "desc":"(5)"}, 
     {"ID":"6", "desc":"(15)"} 
    ] 
    [ 
     {"ID":"0", "desc":"(49)"}, 
     {"ID":"7", "desc":"(5)"} 
    ] 
]; 


$("#inputGender").change((function() { 
    var $persons = $("#inputWeight").empty(); 
    $.each(data[$(this).val() - 1], function() { 
     $persons.append("<option value=" + this.ID + ">" + this.desc + "</option>"); 
    }); 
}); 

); 

當值m選擇我要填充這個數據：

[ 
    {"ID":"1", "desc":"(12)"}, 
    {"ID":"2", "desc":"(5)"}, 
    {"ID":"6", "desc":"(15)"} 
] 

在選擇ID #inputWeight。或者如果w被選中然後顯示：

[ 
    {"ID":"0", "desc":"(49)"}, 
    {"ID":"7", "desc":"(5)"} 
] 

...但它不工作。

有些想法嗎？

Answer 1

這條線是什麼錯在你的JS：

$.each(data[$(this).val() - 1], function() { 

$this.val()，在此背景下，意味着inputGender的價值，它可以是 「M」 或 「W」。你必須從別的地方粘貼這些代碼，因爲它假定了整數值。試試你的數據變爲這樣：

var data = { 
    m: [{"ID":"1","desc":"(12)"},{"ID":"2","desc":"(5)"},{"ID":"6","desc":"(15)"}], 
    w: [{"ID":"0","desc":"(49)"},{"ID":"7","desc":"(5)"}] 
}; 

，然後你可以使用$(this).val()得到你想要的數組：

$("#inputGender").change(function() { 
    var $persons = $("#inputWeight").empty(); 
    $.each(data[$(this).val()], function() { 
     $persons.append("<option value=" + this.ID + ">" + this.desc + "</option>"); 
    }); 
}); 

看到它在this fiddle帶電作業。