ajax返回json數組遍歷添加到html

　　　大體需求爲類型限制根據類型獲取不一樣結果列表，再根據模糊查詢搜索出結果，效果以下：

　　　　那麼這裏能夠得知，選中不一樣下拉選項請求接口帶個type參數返回不一樣結果，並動態加入select框中。我寫了個searchKeywords函數，方便調用。

html源碼：

　　　　　　<div id="isShowDIv">
		 <div class="control-group">
                    <label class="control-label">類型限制</label>
                    <div class="controls">
                     <input class="span1" type="hidden" value="{$coupon.restrict_type}" name="restrict_type_defult" id="restrict_type_defult" >   
                     <select tabindex="1" name="restrict_type" class="span1 view_topCate" data-placeholder="Select here.." onchange="ShowImage2(parseInt(this.value), 'restricttype');" >
						   <option value="1" <if condition=" $coupon.restrict_type eq 1 "> selected</if> >專題</option>
                           <option value="2" <if condition=" $coupon.restrict_type eq 2 "> selected</if> >分類</option>
                           <option value="3" <if condition=" $coupon.restrict_type eq 3 "> selected</if> >品牌</option>
                           <option value="4" <if condition=" $coupon.restrict_type eq 4 "> selected</if> >商城</option>
					</select>
					<input id="searchInput" class="span2" type="text" name="keywords" value="" placeholder="請搜索關鍵詞">
                    <input class="span1" type="button" value="查詢" id="searchBtn">
                    </div>
                  </div>
                     
                 <div class="control-group" style="display:block" id="restricttype1">
			<label class="control-label">專題</label>
				 <div class="controls">
					<select id="brandListResult1" tabindex="1" class="brandListResult" name="restrict_seminar[]" data-placeholder="Select here.." class="span3" multiple="multiple">
					　　　　<foreach name="seminar" item="co">
						　　 <option value="{$co.id}" <range name="co.id" value="$coupon.restrict_seminar" type="in" >selected</range> >{$co.name}</option>    
						</foreach>
					</select>
				<div id="selectBtn">
						<input type="button" value=" >> " onclick="moveOption(document.getElementById('brandListResult1'),document.getElementById('brandListRight1'))"><br><br>  
						<input type="button" value=" << " onclick="moveOption(document.getElementById('brandListRight1'), document.getElementById('brandListResult1'))">  
				</div>
			　　　　　　　　<select  multiple id="brandListRight1" name="restrict_seminar_new[]"  
						 ondblclick="moveOption(document.getElementById('brandListRight1'), document.getElementById('brandListResult1'))">  
					</select> 
				 <span class="help-inline" style="line-height:100px;color:red;">* 右側爲已選中項</span>
			</div>
		</div> 

 js代碼：

　　　　　　function searchKeywords(){
                    var type=$('select[name=restrict_type] option:selected').val(); //下拉選中type
                    var keywords=$('#searchInput').val(); //搜索的關鍵詞
                    $.ajax({
                        type: "get",
                        url:"?c=api&a=getSelectByKeywords",
                        data: {type:type,keywords:keywords},
                        dataType: "json", 
                        success: function(data){ 
                            var html;
                            $.each(data, function(i, obj) {
                                    html += '<option value="' + obj.id + '">' + obj.name + '</option>';  //循環遍歷，拼接
                            });
                            $(".brandListResult").html(html);//動態插入html
                                 },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert('搜索關鍵詞出錯');
                               } 
                        });
                }

最後來個效果展現：