利用jquery实现select下拉框级联效果

最新推荐文章于 2025-07-03 16:16:28 发布

acmbb

最新推荐文章于 2025-07-03 16:16:28 发布

阅读量7.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/u012283400/article/details/64919366

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用jQuery实现select下拉框的级联效果。当父级下拉框选项改变时，子级下拉框内容动态更新。以医院科室为例，根据选择的医院，动态加载相应的科室选项。主要涉及js中的hosChange函数处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所谓级联效果，即页面上存在具有包含关系的多组下拉框。当逻辑上的父级下拉框某个选项被选中（即selected），其包含的列表内容作为子级下拉框中的选项（option）供用户选择。例如：当用户选择所在区域时，城市下拉框选择“北京”，对应的区县下拉框中内容动态生成为为“海淀，朝阳，西城......”。一旦城市固定，用户仅能选择该城市下的对应区县。现将jquery下的实现进行分享。

首先是页面中两个select标签html代码，本例中使用的框架为freemaker框架，其中科室属于医院（病人属于科室）：

<div class="row cl">
	<label class="form-label col-3">医院：</label>
	<div class="formControls col-5">
	<span class="select-box">
            <select class="select" id="selecthos"  name="department.hosID" onchange="hosChange()">
                <#if department??>
            		<#list hospitals as item>
            			<#if department.hosID==item.hosID>
            				<option value="${item.hosID}" selected>${item.hosName!}</option>
            			<#else>
            				<option value="${item.hosID}">${item.hosName!}</option>
            			</#if>
            		</#list>
		        <#else>		        	
		        	<#list hospitals as item>
            			<option value="${item.hosID}">${item.hosName!}</option>
            		</#list>		        	
	            </#if>
            </select>  
	</span>
	</div>
	<div class="col-4"></div>
</div>

<div class="row cl">
	<label class="form-label col-3">科室：</label>
	<div class="formControls col-5">
		<span class="select-box">
            <select class="select" id="selectdepart" name="patient.departID">
            </select>  
		</span>
	</div>
	<div class="col-4"></div>
</div>

2.js中hosChange函数实现：

function hosChange(){
	var hosID=$("#selecthos").val();
	Common.AjaxPost('${base}/test/patient/getDeparts?resultType=json', {"hosID":hosID}, undefined,function(data){
		$("#selectdepart").empty();
		for(var depart in data){
			$("#selectdepart").append("<option value='"+data[depart].departID+"'>"+data[depart].departName+"</option>");
		}
	},function(errMsg,errCode){
		Common.Alert(errMsg);
	});
}

主要思想是通过ajax获得指定医院ID下的所有科室，前端循环append到select标签下。