从jquery中的二维数组填充下拉列表

Populate dropdown from 2 dimensional array in jquery

本文关键字：填充 下拉列表 二维数组 jquery      更新时间：2023-09-26

我有以下下拉列表：

<select id="start" onchange="calcRoute();"></select>

我需要用从以下类型的Javascrippt数组中获得的值来填充它：

{"name":"Hotel1","address":"Bondi Beach","lat":"6.369869","lng":"80.042055","thumb_path":"img'/hotel1.jpg"},{"name":"Hotel2","address":"Coogee Beach","lat":"6.025822","lng":"80.305727","thumb_path":"img'/hotel2.jpg"},{"name":"Hotel3","address":"Cronulla Beach","lat":"6.691994","lng":"79.928771","thumb_path":"img'/hotel3.jpg"},{"name":"Hotel4","address":"Manly Beach","lat":"6.887130","lng":"80.093420","thumb_path":"img'/hotel4.jpg"},{"name":"Hotel5","address":"Maroubra Beach","lat":"7.362609","lng":"79.825005","thumb_path":"img'/hotel5.jpg"}

我试了以下方法，但不起作用。

for (i = 0; i < locations.length; i++) {
    $('#start select').append('<option value=' + locations[i]['name'] + '>' + locations[i]['name'] + '</option>');
    alert("sdgsfg");
}

请提出解决方案。

选择器$('#start select')将在#start元素内选择不起作用的<select>元素，因为select本身的id是start。要正确选择元素，请使用

$('#start') // or $('select#start')

最好不要弄乱HTML字符串。您可以使用Option构造函数来创建新的Option元素。

var locations = [{"name":"Hotel1","address":"Bondi Beach","lat":"6.369869","lng":"80.042055","thumb_path":"img'/hotel1.jpg"},{"name":"Hotel2","address":"Coogee Beach","lat":"6.025822","lng":"80.305727","thumb_path":"img'/hotel2.jpg"},{"name":"Hotel3","address":"Cronulla Beach","lat":"6.691994","lng":"79.928771","thumb_path":"img'/hotel3.jpg"},{"name":"Hotel4","address":"Manly Beach","lat":"6.887130","lng":"80.093420","thumb_path":"img'/hotel4.jpg"},{"name":"Hotel5","address":"Maroubra Beach","lat":"7.362609","lng":"79.825005","thumb_path":"img'/hotel5.jpg"}]
var select = $('#start')[0];
locations.forEach(function(location) {
    select.add(new Option(location.name, location.name));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="start"></select>

相关文章：