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

最新推荐文章于 2024-09-01 12:48:53 发布

acmbb

最新推荐文章于 2024-09-01 12:48:53 发布

阅读量7.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/u012283400/article/details/64919366

版权

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

摘要由CSDN通过智能技术生成

所谓级联效果，即页面上存在具有包含关系的多组下拉框。当逻辑上的父级下拉框某个选项被选中（即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" οnchange="hosChange()">
                <#if department??>
            		<#list hospitals as item>
            			<#if