select动态加载(动态赋值)

select动态加载——小技巧——前端页面

两个下拉选，第一个城市，第二个为市区。目标：第二个下拉选（市区）根据城市动态生成。

1 jsp中的骨架代码

<div>
	<label><span class="c-red">*</span>城市：</label> 
	<select id="CITY_NO" style="width:200px;">
		<option value="bj">北京</option>
		<option value="yt">烟台</option>
		<option value="cd">承德</option>
	</select>
</div>
<div>
	<label><span class="c-red">*</span>市区：</label> 
	<select id="AREA_NO" style="width:200px;"></select>
</div>

2 简单的动态插入市区option

	//点击城市下拉选后调用方法
	$("#CITY_NO").change(function(){
		//首先将市区下拉选内容清空，清空的方法一般有两种,第二种使用更多一点
		//$("#AREA_NO").html("");
		$("#AREA_NO").empty();
		if($("#CITY_NO").val() == "bj"){
			$("#AREA_NO").append('<option value="cy">朝阳区</option>');
			$("#AREA_NO").append('<option value="hd">海淀区</option>');
			$("#AREA_NO").append('<option value="my">密云区</option>');
		}else if($("#CITY_NO").val() == "yt"){
			$("#AREA_NO").append('<option value="zf">芝罘区</option>');
			$("#AREA_NO").append('<option value="ls">莱山区</option>');
		}else{
			$("#AREA_NO").append('<option value="sq">双桥区</option>');
			$("#AREA_NO").append('<option value="sl">双滦区</option>');
			$("#AREA_NO").append('<option value="yz">营子区</option>');
			$("#AREA_NO").append('<option value="gx">高新区</option>');
		}
	});

3 开发中常用的ajax方式动态加载

	//城市下拉选被选中后调用该方法
	$("#CITY_NO").change(function(){
		$.ajax({
			url:"请求地址",
			data:'CITY_NO=$("#CITY_NO").val()',
			type:"post",
			success:function(data){
				//首先将市区下拉选内容清空，清空的方法一般有两种,第二种使用更多一点
				//$("#AREA_NO").html("");
				$("#AREA_NO").empty();
				//这里返回的数据一般是根据城市CITY_NO从数据库查询到的市区数据，并且数据一般是集合形式。
				//将得到的市区信息遍历，循环插入<option>，假如数据为areaList
				//这里为了达到简单的演示效果我假设一些数据
				data = {"areaList":[{"AREA_NAME":"双桥区"},{"AREA_NAME":"双滦区"},{"AREA_NAME":"营子区"},{"AREA_NAME":"高新区"}]};
				var areaList = data.areaList;
				for(var i=0;i<areaList.length;i++){
					//这里两个方法是首先转化为json字符串，然后转化为json对象
					var json = JSON.stringify(areaList[i]);
					var area = JSON.parse(json);
					var str = "<option value="+area['AREA_NAME']+">"+area['AREA_NAME']+"</option>";             
					$("#AREA_NO").append(str);
				}
			}
		});
		//最后在补充一点，如果你使用了jquery chosen这个插件，那么完成上述操作后并不会显示出市区，需要将市区元素重新加载一下，调用如下两个方法中的一个即可
		//$("#AREA_NO").trigger("liszt:updated");
		//$("#AREA_NO").trigger("chosen:updated");
	});

有不正确的地方希望各位朋友不吝指教并多多包涵！
有不懂的地方可以留言多多交流，共同进步！
如果内容对各位朋友有一定帮助，点个赞！