使用 ajax 将 JSON 数组放入 Select Tag 中仅获取 1 个值
我想获取我调用到选择选项标签的 json 数组的所有数据
我从这里调用 api http://dev.farizdotid.com/api/daerahindonesia/provinsi这是我得到的 json 数组
semuaprovinsi: Array(34)
0: {id: "11", nama: "Aceh"}
1: {id: "12", nama: "Sumatera Utara"}
2: {id: "13", nama: "Sumatera Barat"}
3: {id: "14", nama: "Riau"}
4: {id: "15", nama: "Jambi"}
5: {id: "16", nama: "Sumatera Selatan"}
6: {id: "17", nama: "Bengkulu"}
7: {id: "18", nama: "Lampung"}
8: {id: "19", nama: "Kepulauan Bangka Belitung"}
9: {id: "21", nama: "Kepulauan Riau"}
10: {id: "31", nama: "Dki Jakarta"}
11: {id: "32", nama: "Jawa Barat"}
12: {id: "33", nama: "Jawa Tengah"}
13: {id: "34", nama: "Di Yogyakarta"}
14: {id: "35", nama: "Jawa Timur"}
15: {id: "36", nama: "Banten"}
16: {id: "51", nama: "Bali"}
17: {id: "52", nama: "Nusa Tenggara Barat"}
18: {id: "53", nama: "Nusa Tenggara Timur"}
19: {id: "61", nama: "Kalimantan Barat"}
20: {id: "62", nama: "Kalimantan Tengah"}
21: {id: "63", nama: "Kalimantan Selatan"}
22: {id: "64", nama: "Kalimantan Timur"}
23: {id: "65", nama: "Kalimantan Utara"}
24: {id: "71", nama: "Sulawesi Utara"}
25: {id: "72", nama: "Sulawesi Tengah"}
26: {id: "73", nama: "Sulawesi Selatan"}
27: {id: "74", nama: "Sulawesi Tenggara"}
28: {id: "75", nama: "Gorontalo"}
29: {id: "76", nama: "Sulawesi Barat"}
30: {id: "81", nama: "Maluku"}
31: {id: "82", nama: "Maluku Utara"}
32: {id: "91", nama: "Papua Barat"}
33: {id: "94", nama: "Papua"}
这是我的 jquery 代码
$(function() {
var province = $('#provinces');
var select = $('#selection');
var option = $('<option>');
});
}
});
});
它只显示进入我的选择标签的数据的最后一个索引，即索引号 33
这是我选择的标签
<select id="selection">
<option value=""></option>
</select>
我不知道为什么我只得到 1 个数据
12345678_00012回答
-
慕桂英546537
您必须为每个选项创建新选项。否则修改相同。$(function() { var province = $("#provinces"); var select = $("#selection"); $.ajax({ type: "GET", dataType: "json", url: "http://dev.farizdotid.com/api/daerahindonesia/provinsi", success: function(provinces) { console.log(provinces); var allProvince = provinces.semuaprovinsi; $.each(allProvince, function(i, item) { var option = $("<option>"); option.text(item.nama); option.attr("value", item.id); select.append(option); }); } });});$(function() { var select = $("#selection"); $.ajax({ type: "GET", dataType: "json", url: "http://dev.farizdotid.com/api/daerahindonesia/provinsi", success: function(provinces) { var allProvince = provinces.semuaprovinsi; $.each(allProvince, function(i, item) { var option = $("<option>"); option.text(item.nama); option.attr("value", item.id); select.append(option); }); } });});**//Working sample**<!DOCTYPE html><html><head> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script></head><body> <select id="selection"> <option value=""></option> </select> </body></html> -
慕雪6442864
在每次迭代option中初始化：.each$.each(allProvince, function (i, item) { var option = $('<option>'); option.text(item.nama); option.attr('value', item.id); select.append(option);});
随时随地看视频慕课网APP
相关分类
Html5