如何使用嵌套数组填充选项选择

Question

我有一个如下数组：

我需要填写选项菜单，如下所示：

<option value="3">Mini</option>
<option value="4">MiniO</option>

我试图这样做，但收到了错误：

$.ajax({
      url: "/grab_accessories/" + style_id,
      dataType: 'json',
      success: function(response) {
        if (response == null) {
        } else {
          $("#accessory_box").show();
          console.log(response);
          $.each(response, function(accessory) {
            $.each(accessory, function(id, name) {
              $('#ticket_accessories')
               .append($("<option></option>")
               .attr("value",id)
               .text(name)); 
            });
          });
        }
      }   
    });

这是错误：

Uncaught TypeError: Cannot use 'in' operator to search for '5' in styles 

答案可以是js或jquery

Answer 1

这将返回您想要的HTML结构作为字符串（其中styles是您示例中的数组）：

styles.map(function(obj) {
  return "<option value='"+ obj.id +"'>"+ obj.name +"</option>"; 
}).join();

除了答案：

success: function(response) {
  if (response == null) {
  } else {
    $("#accessory_box").show();
    var styles = response.styles;
    var options = styles.map(function(obj) {
      return "<option value='"+ obj.id +"'>"+ obj.name +"</option>";
    }).join();

    $('#ticket_accessories').append(options);
  }
}

这个解决方案的一个好处是，当使用.each循环（并创建选项元素）时，除非你明确地从它们中构建一个字符串，否则你最终会在每次迭代时访问并将元素附加到DOM。这仅对所有填充元素添加元素一次。

它是纯JS，但如果您需要扩展的浏览器兼容性，请随意使用$ .map（）。

Answer 2

尝试只使用一个$.each，因为您为每个对象构建了每个选项，而不需要另一个对象属性的循环。

var styles = response.styles;

 $.each(styles, function(accessory) {
          $('#ticket_accessories')
               .append($("<option></option>")
               .attr("value",styles[accessory].id)
               .text(styles[accessory].name)); 
 });

Fiddle