ajax查询返回下拉框选项，并拼写在下拉框中(下拉框联动)

鸡毛飞不上天

于 2023-05-22 22:27:23 发布

阅读量370

点赞数

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/qq_31542611/article/details/130815482

版权

在两个下拉框联动的时候常常要动态改变后面一个下拉框的选项列表，比如省市两个下拉框联动，省级改变，市级下拉框选项跟着改变，这种情况，一般我们会采用ajax局部加载来做。

省级：<select id="proCode" onchange="proChange(this.value)">
	<option value="">--请选择--</option>
	#if($!{proList})
		#foreach($item in $!{proList})
			<option value="$!{item.code}" #if("$!{item.code}"=="$!{params.proCode}")selected #end>$!{item.def}</option>
		#end
	#end
</select>
市级：
<select id="cityCode" onchange="cityChange(this.value)">
	<option value="">--请选择--</option>
	#if($!{cityList})
		#foreach($item in $!{cityList})
			<option value="$!{item.code}" #if("$!{item.code}"=="$!{params.proCode}")selected #end>$!{item.def}</option>
		#end
	#end
</select>
县级：
<select id="countyCode">
	<option value="">--请选择--</option>
	#if($!{countyList})
		#foreach($item in $!{countyList})
			<option value="$!{item.code}" #if("$!{item.code}"=="$!{params.proCode}")selected #end>$!{item.def}</option>
		#end
	#end
</select>

<script>
function proChange(proCode){
	var token=jQuery("#token").val();
	$.ajax({
		type:"post",
		url:"${rc.contextPath}/exp/bbbb/getCitys",
		data:{token:token,proCode:proCode},
		async:true,
		dataType:"json",
		success: function(data){
			$("cityCode").empty();//清空城市下拉框内容直接用$("cityCode").innerHtml=""；在拼接 会显示错误
			var optsVal="<option value=\"\">--请选择--</option>";
		  	$("#cityCode").append(optsVal);
		  	for(var i=0;i<data.length;i++){
				var optsVal="<option value=\""+data[i].code+"\">"+data[i].def+"</option>";
				$("#cityCode").append(optsVal);
			}
		}
	})
}
</script>