使用 ajax 将 JSON 数组放入 Select Tag 中仅获取 1 个值

使用 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_0001

浏览 96回答 2

2回答

慕桂英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>

0

0

慕雪6442864

在每次迭代option中初始化：.each$.each(allProvince, function (i, item) {    var option = $('<option>');    option.text(item.nama);     option.attr('value', item.id);    select.append(option);});

0

0

随时随地看视频慕课网APP

相关分类

Html5