我有一个像这样的 json 数组
{Id:[1,2,4,5,8,9,14,22,10,11,12,13,20,21,28,30,31,15,23,32,33,34,35,36,37,38,41,16,24,42,43,48,49,17,25,58,59,61,62,63,64,66,67,68,18,26,69,70,74,75,19,27,82,83,85,86,87,88,89,90,91,108,109,110,111,120]}
并希望在从 select 标签中选择一个选项时选择相应的 id，这也是动态的，即也是一个 json 数组，它在 select 标签选项中显示为
<select id="list">
<option>--Select--</option>`enter code here`
<option>List gets updated by the json array</option>
</select>
我必须使用 jQuery/javascript 来完成它..任何帮助将不胜感激。
最佳答案
使用 Array#map 方法迭代生成option element using jQuery .附上 change() 监听事件的事件处理器。
var data = {
Id: [1, 2, 4, 5, 8, 9, 14, 22, 10, 11, 12, 13, 20, 21, 28, 30, 31, 15, 23, 32, 33, 34, 35, 36, 37, 38, 41, 16, 24, 42, 43, 48, 49, 17, 25, 58, 59, 61, 62, 63, 64, 66, 67, 68, 18, 26, 69, 70, 74, 75, 19, 27, 82, 83, 85, 86, 87, 88, 89, 90, 91, 108, 109, 110, 111, 120]
};
$('#list').append(
data.Id.map(function(v) {
return $('<option/>', {
value: v,
text: v
})
})
).change(function() {
console.log(this.value);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list">
<option>--Select--</option>
</select>更新: 由于您需要根据选择的选项获取 ID，请按如下方式更新您的代码。您可以在哪里使用 Array#indexOf 方法获取被选元素的索引。
var data = {
"StoreName": ["10001 Main ST", "10002 Part1", "10004 MyStore1", "10005 M STR", "10008 Centro", "10009 MyStore 02", "1001 G", "1001 H", "10010 Store main ROAD", "10011 Central M Store", "10012 En Department", "10013 M Station", "10014 Test Center", "10015 SubStore1", "10016 AA", "10018 M part #", "10019 Test A - 26032016", "1002 B", "1002 I", "10020 Test Central B "],
Id: [1, 2, 4, 5, 8, 9, 14, 22, 10, 11, 12, 13, 20, 21, 28, 30, 31, 15, 23, 32, 3, 34, 35, 36, 37, 38, 41, 16, 24, 42, 43, 48, 49, 1, 25, 58, 59, 61, 62, 63, 4, 66, 67, 68, 18, 26, 69, 70, 74, 75, 19, 27, 82, 8, 85, 86, 87, 88, 89, 90, 1, 108, 109, 110, 111, 10]
};
$('#storenm').append(data.StoreName.map(function(v) {
// generate option with value and text content
return $('<option>', {
text: v,
value: v
})
})).change(function() {
console.log(data.Id[data.StoreName.indexOf(this.value)])
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<select id="storenm" name="name">
<option>--Select--</option>
</select>
</body>关于javascript - 如何将 json 数组元素映射到下拉列表中选择的选项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40056112/