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('搜索关键词出错');
                               } 
                        });
                }

最后来个效果展示：