ajax异步传输参数并回显到option中

主要效果：province和city是一张树形表，选择好province后，city才显示出所对应的数据，存入数据库的是value并非id。

直接放重点吧：

html:

<div class="control-group">
			<label class="control-label">city：</label>
			<div class="controls">
				<form:select path="city" class="input-xlarge " id="dss">
					<form:option value="" label=""/>
					
				</form:select>
			</div>
		</div>

js

<script type="text/javascript">
		var name = null;
        $("select#ssss").change(function(){
            name = $(this).val();
            $.ajax({
                type:"POST",
                async:true,  //异步
				dataType:"json",
                url: "${ctx}/qiwen/testcp/qiwenTestCp/city",    //url地址
                data:{"name":name},
                success : function (data) {   //请求成功时的返回函数
                   var list =  JSON.stringify(data);
					$("#ss").val(list);
                    var $select = $('#dss');
                    for(var i=0; i < data.length;i<i++){
                        $select.append('<option value="'+data[i]['name']+'">'+data[i]['name']+'</option>');
                    }

                }
            });
         });

	</script>

controller:

@RequiresPermissions("User")
	@ResponseBody
	@RequestMapping(value = "city")
	public List<QiwenCity> city(Model model,String name,HttpServletResponse response){
		List<QiwenCity> listCitychild = qiwenTestCpService.findCityChild("3",name);
		
		return listCitychild;
	}

为了防止option重复，显示出来的数据不更新，在jqeury中添加：

$("#citySelect").empty();
$("#sa span").each(function(){
    $(this).text('');
});