[英]Drop-down box with Json data
我正在嘗試使用jquery使用以下JSON數據填充下拉框
{
"Name":["A","B","C"],
"Movie":["X","Y","Z"]
}
這是我迄今為止所做的劇本
$("#firstbox").change(function(){
var $selection=$(this);
$.getJSON("data.json",function(data){
var i=$selection.val();
var arr=[];
switch(i){
case 'Name':
arr=data.Name.split(",");
break;
case 'Movie':
arr=data.Movie.split(",");
break;
}
});
});
我的基本index.html就是這樣的
<select id="firstbox">
<option selected value="">---Select---</option>
<option value="Name">Name</option>
<option value="Movie">Movie</option>
</select>
<select id="secondbox" name="">
<option selected value="">---Generate---</option>
<script src="myjs.js"> </script>
</select>
'secondbox'下拉列表應生成與'firstbox'下拉列表相對應的值。 我收到的錯誤是'未定義的拆分功能'。 任何人都可以給我一個提示嗎?
謝謝
split
是String
對象的一個方法,在這里你可以在Array
對象上使用它。 您不需要拆分,因為Name和Movie鍵是JSON對象中的allready數組。
$("#firstbox").on("change", function(e){
var sel=$(this).val();
$("#secondbox").empty();
$.getJSON("data.json",function(data){
var values=data[sel] || ['Error : key not found'];
$(values).each(function(index,element) {
$("<option />", {value: element, text:element}).appendTo("#secondbox");
});
});
});
這是一個工作例子: http : //jsfiddle.net/cKBeE/
$("#firstbox").on("change", function(e){
writeOptions();
}
function getJSONData(firstboxval) {
//make ajax call to get data for second dropdown
//that corresponds to the value selected in firstbox
//then make function return the array of options
}
function writeOptions() {
var firstboxval = $("#firstbox").val();
var optionValues = getJSONData(firstboxval);
var dropDown = document.getElementById("secondbox");
for(var i=0; i<optionValues.length; i++) {
var key = i;
var value = optionValues[i];
dropDown.options[i] = new Option(value, key);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.