Question

我有一个带有一些数据的json数组我希望在select box选项值中填充它的所有值... 数组如

[
  {
    "CityId": "42231",
    "CountryID": "1",
    "RegionID": "833",
    "City": "Herat",
    "Latitude": "34.333",
    "Longitude": "62.2",
    "TimeZone": "+04:30",
    "DmaId": "0",
    "Code": "HERA"
  },
  {
    "CityId": "5976",
    "CountryID": "1",
    "RegionID": "835",
    "City": "Kabul",
    "Latitude": "34.517",
    "Longitude": "69.183",
    "TimeZone": "+04:50",
    "DmaId": "0",
    "Code": "KABU"
  },
  {
    "CityId": "42230",
    "CountryID": "1",
    "RegionID": "852",
    "City": "Mazar-e Sharif",
    "Latitude": "36.7",
    "Longitude": "67.1",
    "TimeZone": "+4:30",
    "DmaId": "0",
    "Code": "MSHA"
  }
]

我希望使用jquery在选择框中填充此值，我该怎么做... 我试过了

$.each(json, function(i, value) {
    $('#cityselect').append($('<option>').text(value.CityId).attr('value.city', value.City));
});

任何人都可以帮助我吗

Answer 1

var data = [{"CityId":"42231","CountryID":"1","RegionID":"833","City":"Herat","Latitude":"34.333","Longitude":"62.2","TimeZone":"+04:30","DmaId":"0","Code":"HERA"},{"CityId":"5976","CountryID":"1","RegionID":"835","City":"Kabul","Latitude":"34.517","Longitude":"69.183","TimeZone":"+04:50","DmaId":"0","Code":"KABU"},{"CityId":"42230","CountryID":"1","RegionID":"852","City":"Mazar-e Sharif","Latitude":"36.7","Longitude":"67.1","TimeZone":"+4:30","DmaId":"0","Code":"MSHA"}];

现在填充选项：

var $select = $('#cityselect');

$.each(data, function(i , value) {
     var option = $('<option value="'+ value.CityId+'">'+ value.City +'</option>');
     $select.append(option);
});

在性能方面更加出色：

＆＃13;

var data = [{"CityId":"42231","CountryID":"1","RegionID":"833","City":"Herat","Latitude":"34.333","Longitude":"62.2","TimeZone":"+04:30","DmaId":"0","Code":"HERA"},{"CityId":"5976","CountryID":"1","RegionID":"835","City":"Kabul","Latitude":"34.517","Longitude":"69.183","TimeZone":"+04:50","DmaId":"0","Code":"KABU"},{"CityId":"42230","CountryID":"1","RegionID":"852","City":"Mazar-e Sharif","Latitude":"36.7","Longitude":"67.1","TimeZone":"+4:30","DmaId":"0","Code":"MSHA"}];
var $select = $('#cityselect');
    options = [];
    $.each(data, function(i , value) {
         options.push('<option value="'+ value.CityId+'">'+ value.City +'</option>');
    });
    $select.html(options.join(""));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="cityselect"></select>

＆＃13;

Answer 2

您可以使用.val(id)设置ID，.text(name)设置option的名称。

$('#cityselect').append($('<option />').val(value.CityId).text(value.City));

var json = [{"CityId":"42231","CountryID":"1","RegionID":"833","City":"Herat","Latitude":"34.333","Longitude":"62.2","TimeZone":"+04:30","DmaId":"0","Code":"HERA"},{"CityId":"5976","CountryID":"1","RegionID":"835","City":"Kabul","Latitude":"34.517","Longitude":"69.183","TimeZone":"+04:50","DmaId":"0","Code":"KABU"},{"CityId":"42230","CountryID":"1","RegionID":"852","City":"Mazar-e Sharif","Latitude":"36.7","Longitude":"67.1","TimeZone":"+4:30","DmaId":"0","Code":"MSHA"}];

$.each(json, function(i, value) {
  $('#cityselect').append($('<option />').val(value.CityId).text(value.City));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='cityselect'> </select>

Answer 3

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>

</head>
<body>

	<select id="cityselect"></select>

</body>
<script>
$(document).ready(function () {
var listVal=[{"CityId":"42231","CountryID":"1","RegionID":"833","City":"Herat","Latitude":"34.333","Longitude":"62.2","TimeZone":"+04:30","DmaId":"0","Code":"HERA"},{"CityId":"5976","CountryID":"1","RegionID":"835","City":"Kabul","Latitude":"34.517","Longitude":"69.183","TimeZone":"+04:50","DmaId":"0","Code":"KABU"},{"CityId":"42230","CountryID":"1","RegionID":"852","City":"Mazar-e Sharif","Latitude":"36.7","Longitude":"67.1","TimeZone":"+4:30","DmaId":"0","Code":"MSHA"}] ;
	$.each(listVal, function(i, value) {
                                            $('#cityselect').append('<option value="'+ value.CityId+'">'+ value.City +'</option>');
                                        });
});
</script>
</html>

＆＃13;

使用jquery在选择框中的选项中填充数据

3 个答案: