联动下拉

gaosililn

浏览: 73421 次
性别:

最近访客更多访客>>

heroyufeng

aya327

pangfei2001

qq3434552

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

在不少的网页为了提高体验度，在一些下拉的选择框中提供了联动这种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>