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

Fill data in options in select box using jquery

本文关键字：选项 填充 数据 jquery 选择 使用      更新时间：2023-09-26

我有一个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"
  }
]

我想用jquery在选择框中填写这个值，我该怎么做。。。我试过

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

有人能帮我拿这个吗

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);
});

在性能方面甚至更好：

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(""));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="cityselect"></select>

<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>

您可以使用.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>

相关文章：