我试图使用jquery从JSON填充选择选项。这是我的html表单代码（带有搜索选项） -
<div class="form-group row">
<label for="" class="col-sm-2 form-control-label">Country</label>
<div class="col-sm-10">
<select class="form-control selectpicker" id="country" placeholder="" data-live-search="true">
</select>
</div>
</div>
以下是我编写的代码，用文档填充表单，并捕获并回显选择 -
(function() {
var url = "dummy.json";
countries = [];
divisions = [];
districts = [];
subdistricts = [];
$.getJSON(url)
.done(function( data ) {
countries.push(data['Country']);
divisions.push(data['Divisions']);
districts.push(data['Districts']);
subdistricts.push(data['Subdistricts']);
$('#country').empty();
for(i=0; i<countries[0].length; i++){
$('#country').append('<option data-tokens="' + countries[0][i]["name"] +'" value="' + i + '">' + countries[0][i]["name"] + '</option>');
};
$('#country').change(function(){
var selected = $( this ).val();
console.log(selected);
});
});
})();
我的问题是 - 运行代码后没有填充选择表单。我的代码中是否有语法错误？或者我是以错误的方式接近它？如果有人想看到json文件，我会在这里发布。
这是我的JSON文件 -
{
"Country": [
{
"id": "01",
"name": "China",
"capital": "Beijing",
"divisions": "[01, 02, 03]",
"districts": "[01, 02, 03]"
},
{
"id": "02",
"name": "Bangladesh",
"capital": "Dhaka",
"divisions": "[04,05,06,07,08,09,10,11]",
"Districts": "[04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]"
},
{
"id": "03",
"name": "Singapore",
"Capital": "Singapore City",
"Divisions": "[12,13,14,15,16]",
"Districts": "[32,33,34,35,36]"
}
],
"Divisions": [
{
"id": "01",
"name": "Shengdong",
"districts": [
[
"[01]"
]
]
},
{
"id": "02",
"name": "Anhui",
"districts": [
[
"[02]"
]
]
},
{
"id": "03",
"name": "Fujian",
"districts": [
[
"[03]"
]
]
},
{
"id": "04",
"name": "Barisal",
"districts": "[4,5,6]"
},
{
"id": "05",
"name": "Chittagong",
"Districts": "[07,08,09,10]"
},
{
"id": "06",
"name": "Dhaka",
"Districts": "[11,12]"
},
{
"id": "07",
"name": "Khulna",
"Districts": "[13,14]"
},
{
"id": "08",
"name": "Central Region",
"Districts": [
[
"[15]"
]
]
},
{
"id": "09",
"name": "North Region",
"Districts": [
[
"[16]"
]
]
},
{
"id": "10",
"name": "East Region",
"Districts": [
[
"[17]"
]
]
},
{
"id": "11",
"name": "North-east Region",
"Districts": [
[
"[18]"
]
]
},
{
"id": "12",
"name": "West Region",
"Districts": [
[
"[19]"
]
]
}
],
"Districts": [
{
"id": "1",
"name": "Dongcheng",
"Subdistricts": [
[
"[1]"
]
]
},
{
"id": "2",
"name": "Yaohai",
"Subdistricts": [
[
"[2]"
]
]
},
{
"id": "3",
"name": "Luyang",
"Subdistricts": [
[
"[3]"
]
]
},
{
"id": "4",
"name": "Barisal",
"Subdistricts": [
[
"[4]"
]
]
},
{
"id": "5",
"name": "Barguna",
"Subdistricts": [
[
"[5]"
]
]
},
{
"id": "6",
"name": "Bhola",
"Subdistricts": "[6,7]"
},
{
"id": "7",
"name": "Chittagong",
"Subdistricts": "[8,9,10,11]"
},
{
"id": "8",
"name": "Cox's Bazar",
"Subdistricts": [
[
"[12]"
]
]
},
{
"id": "9",
"name": "Comilla",
"Subdistricts": [
[
"[13]"
]
]
},
{
"id": "10",
"name": "Feni",
"Subdistricts": [
[
"[14]"
]
]
},
{
"id": "11",
"name": "Dhaka",
"Subdistricts": [
[
"[15]"
]
]
},
{
"id": "12",
"name": "Narayanganj",
"Subdistricts": [
[
"[16]"
]
]
},
{
"id": "13",
"name": "Khulna",
"Subdistricts": [
[
"[17]"
]
]
},
{
"id": "14",
"name": "Bagerhat",
"Subdistricts": [
[
"[18]"
]
]
},
{
"id": "15",
"name": "Radin Mas SMC",
"Subdistricts": [
[
"[19]"
]
]
},
{
"id": "16",
"name": "Jalan Besar GRC",
"Subdistricts": [
[
"[20]"
]
]
},
{
"id": "17",
"name": "Mount Batten GRC",
"Subdistricts": [
[
"[21]"
]
]
},
{
"id": "18",
"name": "Marine Parade GRC",
"Subdistricts": [
[
"[22]"
]
]
},
{
"id": "19",
"name": "West Coast GRC",
"Subdistricts": [
[
"[23]"
]
]
}
],
"Subdistricts": [
{
"id": "1",
"name": "Dailang",
"postcodes": "[736200,404000,100000]"
},
{
"id": "2",
"name": "Changchung",
"postcodes": "[864000,504100,905050]"
},
{
"id": "3",
"name": "Chengdu",
"postcodes": "[994000,909100,109050]"
},
{
"id": "4",
"name": "Agailjhara",
"postcodes": "[8240,8241,8242]"
},
{
"id": "5",
"name": "Amtali Upazella",
"postcodes": "[9940,9941,8878]"
},
{
"id": "6",
"name": "Bhola Sadar",
"postcodes": "[7230,7741,7752]"
},
{
"id": "7",
"name": "Daulatkhan",
"postcodes": "[8650,8871,8880]"
},
{
"id": "8",
"name": "Sitakund",
"postcodes": "[4320,4321,4325]"
},
{
"id": "9",
"name": "Satkania",
"postcodes": "[4460,4461,4458]"
},
{
"id": "10",
"name": "Port",
"postcodes": "[4530,4555,4532]"
},
{
"id": "11",
"name": "Dabal Muring",
"postcodes": "[4320,4321,4448]"
},
{
"id": "12",
"name": "Chokaria",
"postcodes": "[5320,5321,5432]"
},
{
"id": "13",
"name": "Daudkandi",
"postcodes": "[6432,6433,6555]"
},
{
"id": "14",
"name": "Feni sadar",
"postcodes": "[3240,3241,3378]"
},
{
"id": "15",
"name": "Dhanmondi",
"postcodes": "[2330,2441,2878]"
},
{
"id": "16",
"name": "Narayanganj Sadar",
"postcodes": "[6444,6543,6657]"
},
{
"id": "17",
"name": "Batiaghat",
"postcodes": "[7780,7781,7778]"
},
{
"id": "18",
"name": "Bagerhat Sadar",
"postcodes": "[7450,7451,7458]"
},
{
"id": "19",
"name": "Changi",
"postcodes": "[736200,404000,555776]"
},
{
"id": "20",
"name": "Quenstown",
"postcodes": "[787899,878788,987789]"
},
{
"id": "21",
"name": "Clementi",
"postcodes": "[989778,976543,975432]"
},
{
"id": "22",
"name": "Tuas",
"postcodes": "[109901,110900,121345]"
},
{
"id": "23",
"name": "East Region",
"postcodes": "[609098,567654,765432]"
}
]
}
最新编辑：
我已经在控制台中查了一下。带有选项值的HTML表单完全加载，但由于某种原因，我的表单没有显示选项。这是我最新的代码 -
for(var i=0; i<countries[0].length; i++){
$('#country').append('<option data-tokens="' + countries[0][i]["name"].toLowerCase() +'" value="' + countries[0][i]["id"] + '">' + countries[0][i]["name"] + '</option>');
};
在控制台中加载后的HTML代码 -
<select id="country" class="form-control selectpicker" data-live-search="true" placeholder="" tabindex="-98">
<option value="01" data-tokens="china">China</option>
<option value="02" data-tokens="bangladesh">Bangladesh</option>
<option value="03" data-tokens="singapore">Singapore</option>
</select>
出现这种现象的原因是什么？
答案 0 :(得分：1)
更改循环：
for(var i=0; i<countries[0].length; i++){
$('#country').append('<option data-tokens=' + countries[0][i].name +'value=' + i + '>' + countries[0][i].name + '</option>');
};
答案 1 :(得分：0)
好吧，似乎我的问题出现在我使用的 selectpicker 类中。我用于生成选择的搜索选项的插件有自己的标准，用于在选择表单中填充选项。以下是其文档的链接 - https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerrefresh
以下是我修订的 JS 代码 -
(function() {
var url = "dummy.json",
countries = [],
divisions = [],
districts = [],
subdistricts = [],
$.getJSON(url)
.done(function( data ) {
countries.push(data['Country']);
divisions.push(data['Divisions']);
districts.push(data['Districts']);
subdistricts.push(data['Subdistricts']);
var option_string = '';
for(var i=0; i<countries[0].length; i++){
option_string += '<option data-tokens="' + countries[0][i]["name"].toLowerCase() +'" value="' + countries[0][i]["id"] + '">' + countries[0][i]["name"] + '</option>';
}
$('#country').empty().append(option_string).change(function(){
var selected = $(this).val();
console.log(selected);
}).selectpicker('refresh');
});
})();