使用jquery在选择框中动态添加选项组和选项

时间:2017-10-13 10:07:20

标签: javascript jquery ajax

从ajax数据动态添加选项和选项组。

<select name="catsndogs">
   <optgroup label="Cats">
        <option>Tiger</option>
        <option>Leopard</option>
        <option>Lynx</option>
    </optgroup>
</select>

从ajax数据我有这个数组列表

{
  Regular: [
    "S",
    "XS",
    "M"
  ],
  Small: [
    "em"
  ]
}

我需要添加“常规”,“小”作为标题,但在常规下我想要大小列表,在小它下面列出它们的大小, 像这里http://jsfiddle.net/sushilbharwani/Xp8YK/

但需要动态完成这个......任何人都可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

假设json1是你从ajax返回的JSON,可以像这样完成

&#13;
&#13;
$(document).ready(function () {
 
var $cont = $('select');
var json1 = {"Regular": ["S", "XS", "M"],"Small": ["em"]};
   for(var i=0;i<Object.keys(json1).length;i++){
		  var a = '<optGroup label = '+Object.keys(json1)[i]+'>';
      for(var j=0;j<json1[Object.keys(json1)[i]].length;j++){
         a = a+'<option>' + json1[Object.keys(json1)[i]][j] +'</option>'
       }
   $(a).appendTo($cont)
   }
   
});
&#13;
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<body>
<select>

</select>
</body>
&#13;
&#13;
&#13;