jQuery使用数组填充下拉列表，多个数组答案

【问题标题】：jQuery populating dropdown using array, multiple arraysjQuery使用数组填充下拉列表，多个数组
【发布时间】：2015-12-03 20:38:59
【问题描述】：

您好，我正在填充单个选择下拉列表并使用数组来填充下拉列表，如下所示：

var myOptions = {
    val1 : 'Albuquerque Aero (NM75)',
    val2 : 'Albuquerque FM&T (NM14)',
    val3 : 'Allentown (PA19)'
};

目前，下拉菜单“值”和“文本”使用从上述数组中提取的相同信息，如下所示：

$('<option></option>').val(text).html(text)

我需要在“文本”元素中显示不同的信息，因此我想使用多数组而不是两个单独的数组（更高效？），但我很难理解多-Javascript/jQuery 中的数组。

是不是就这么简单：

var myOptions = {
        val1 : 'Albuquerque Aero (NM75)','Different text',
        val2 : 'Albuquerque FM&T (NM14)','Different text',
        val3 : 'Allentown (PA19)','Different text'
    };

我怎样才能实现我想要的？有没有可能？

【问题讨论】：

标签： jquery multidimensional-array drop-down-menu

【解决方案1】：

我建议您修改对象的结构（目前它无效）。

您可以使用value 和text 创建一个对象数组，这些对象可以迭代并可以创建option。

var myOptions = [{
  val: 'Albuquerque Aero (NM75)',
  text: 'Different text (NM75)'
}, {
  val: 'Albuquerque FM&T (NM14)',
  text: 'Different text (NM14)'
}, {
  val: 'Allentown (PA19)',
  text: 'Different text (PA19)'
}];

$.each(myOptions, function(index, item) {
  $('<option />', {
    html: item.text,
    value: item.val
  }).appendTo('select');
});

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

【讨论】：

感谢 Satpal - 感谢您的额外反馈。

【解决方案2】：

最好使用JSON，而不是数组。尝试将值的来源更改为 json 对象并遍历该对象以填充选择列表

var myOptions = [
    {"val" : "Albuquerque Aero (NM75)", "text": "something"},
    {"val" : "Albuquerque FM&T (NM14)", "text": "something"},
    {"val" : "Allentown (PA19)", "text": "something"}
];

$(myOptions).each(function(i, e){
    $("#mySelect").append($("<option>").val(e.val).text(e.text));
});

查看Fiddle

【讨论】：