在不少的网页为了提高体验度，在一些下拉的选择框中提供了联动这种JS技术
比如我们填写地址时候，通常可以选择省份再选择市区等，而市区则以省份为基础适配，而不是将全国的市区都放进来，这样提高用户的体验度
这样在web开发中，通常叫这样为联动。联动实现的方式有很多，JS就是其中一种。
下面就以医院的科室为例，当选择内科，二级联动就展示内科的科室；一级联动选择外科，而二级联动就只选择外科的科室。
展示如下：
具体实现代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<!-- 联动科室-->
<script language="javascript">
var SectionsArr = [];
SectionsArr['内科']=[
{txt:'心血管内科',val:'心血管内科'},
{txt:'呼吸内科',val:'呼吸内科'},
{txt:'消化内科',val:'消化内科'},
{txt:'血液内科',val:'血液内科'},
{txt:'免疫内科',val:'免疫内科'},
{txt:'内分泌科',val:'内分泌科'},
{txt:'肾内科',val:'肾内科'},
{txt:'感染内科',val:'感染内科'},
{txt:'肿瘤内科',val:'肿瘤内科'},
{txt:'神经内科',val:'神经内科'},
{txt:'普通内科',val:'普通内科'},
{txt:'内科ICU',val:'内科ICU'},
{txt:'心理医学科',val:'心理医学科'}
];
SectionsArr['外科']=[
{txt:'基本外科',val:'基本外科'},
{txt:'基本外科',val:'基本外科'},
{txt:'心脏外科',val:'心脏外科'},
{txt:'泌尿外科',val:'泌尿外科'},
{txt:'骨科',val:'骨科'},
{txt:'神经外科',val:'神经外科'},
{txt:'血管外科',val:'血管外科'},
{txt:'乳腺疾病科',val:'乳腺疾病科'},
{txt:'外科ICU',val:'外科ICU'},
{txt:'麻醉科',val:'麻醉科'},
{txt:'胰腺外科',val:'胰腺外科'},
{txt:' 肠外肠内营养科',val:' 肠外肠内营养科'},
{txt:'肝脏外科',val:'肝脏外科'},
{txt:'烧伤整形',val:'烧伤整形'},
{txt:'微创',val:'微创'},
{txt:'传染科',val:'传染科'},
{txt:'手术室',val:'手术室'}
];
SectionsArr['妇儿科']=[
{txt:'妇科',val:'妇科'},
{txt:'产科',val:'产科'},
{txt:'儿科',val:'儿科'}
];
SectionsArr['五官科']=[
{txt:'耳鼻喉科',val:'耳鼻喉科'},
{txt:'口腔科',val:'口腔科'},
{txt:'皮肤科',val:'皮肤科'},
{txt:'眼科',val:'眼科'}
];
SectionsArr['中医科']=[
{txt:'中医内科',val:'中医内科'},
{txt:'中医外科',val:'中医外科'}
];
SectionsArr['医技科']=[
{txt:'检验科',val:'检验科'},
{txt:'放射科',val:'放射科'},
{txt:'核医学科',val:'核医学科'},
{txt:'理疗科',val:'理疗科'},
{txt:'放疗科',val:'放疗科'},
{txt:'病理科',val:'病理科'},
{txt:'超声诊断科',val:'超声诊断科'},
{txt:'输血科',val:'输血科'}
];
SectionsArr['体检科']=[
{txt:'体检中心',val:'体检中心'}
];
SectionsArr['设备科']=[
{txt:'设备中心',val:'设备中心'}
];
/*
* 说明：将指定下拉列表的选项值清空
* @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须
*/
function removeOptions(selectObj)
{
if (typeof selectObj != 'object')
{
selectObj = document.getElementById(selectObj);
}
// 原有选项计数
var len = selectObj.options.length;
for (var i=0; i < len; i++)
{
// 移除当前选项
selectObj.options[0] = null;
}
}
/*
* 说明：设置传入的选项值到指定的下拉列表中
* @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须
* @param {Array} optionList 选项值设置 格式：[{txt:'北京', val:'010'}, {txt:'上海', val:'020'}] ，必须
* @param {String} firstOption 第一个选项值，如：“请选择”，可选，值为空
*/
function setSelectOption(selectObj, optionList, firstOption)
{
if (typeof selectObj != 'object')
{
selectObj = document.getElementById(selectObj);
}
// 清空选项
removeOptions(selectObj);
// 选项计数
var start = 0;
// 如果需要添加第一个选项
if (firstOption)
{
selectObj.options[0] = new Option(firstOption, '');
// 选项计数从 1 开始
start ++;
}
var len = optionList.length;
for (var i=0; i < len; i++)
{
// 设置 option
selectObj.options[start] = new Option(optionList[i].txt, optionList[i].val);
// 计数加 1
start ++;
}
}
function Ss(value){
alert("gaosi");
setSelectOption('SpeSections', SectionsArr[value], '-请选择-');
}
</script>
<!-- 大科室选择 -->
<select name='LargeSections' id='Large sections'
onchange='Ss(this.options[this.selectedIndex].value)'>
<option value="">--选择大科室--</option>
<option value="内科">内科</option>
<option value="外科">外科</option>
<option value="妇儿科">妇儿科</option>
<option value="五官科">五官科</option>
<option value="中医科">中医科</option>
<option value="医技科">医技科</option>
<option value="体检科">体检科</option>
<option value="设备科">设备科</option>
</select>
<!-- 具体科室选择 -->
<select name="SpeSections" id="SpeSections">
<option value=''>--选择具体的科室--</option>
</select>
</body>
</html>