2017-10-13 80 views
-1

從ajax數據動態添加選項和選項組。使用jquery在選擇框中動態添加選項組和選項

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

從阿賈克斯數據我有數組這個名單

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

我需要添加「常規」,「小」爲標題,但在經常我要的大小,並根據小型IT清單列表他們的大小, 像這裏http://jsfiddle.net/sushilbharwani/Xp8YK/

但需要做到這一動態...任何人都可以幫我解決這個問題嗎?

回答

0

假設json1是JSON你是從阿賈克斯返回,可以這樣

$(document).ready(function() { 
 
    
 
var $cont = $('select'); 
 
var json1 = {"Regular": ["S", "XS", "M"],"Small": ["em"]}; 
 
    for(var i=0;i<Object.keys(json1).length;i++){ 
 
\t \t 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) 
 
    } 
 
    
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 
</script> 
 
<body> 
 
<select> 
 

 
</select> 
 
</body>

完成