您的位置：首页 > Web前端 > JavaScript

JS实现下拉列表联动

2015-12-08 15:22 666 查看

<form name="f1">
<select name="s1" onchange="chg(document.f1.s1,document.f1.s2)">
<option value="江西">江西</option>
<option value="福建">福建</option>
</select>
<select name="s2">
<option value="1">1</option>
</select>
</form>
<script>
//创建对象，数据，值，文本
function obj(aData,aValue,aText){ 
	this.Data=aData;
	this.Value=aValue;
	this.Text=aText;
}
//设置选项数据数组，可以添加多个参数为"源地址,选择值，选择文本"
var Set_data=new Array(    
	new obj('江西','南昌','南昌'),
	new obj('江西','九江','九江'),
	new obj('福建','福州','福州'),
	new obj('福建','厦门','厦门')
	);
//该函数接受两个参数——两个下拉菜单
function chg(parent,child){
	//以父菜单的选中选项的值，子菜单，和选项数数据组为参数调用chg函数
	chgComitem(parent.options[parent.selectedIndex].value,child,Set_data);
}
function chgComitem(parentValue,child,objs){ //改变子菜单
	//1.以子菜单为参数调用函数
	DelAllComitem(child);
	//2.遍历所有的选项数据
	for(i=0;i<objs.length;i++){
		//如果选项数据的Data与父菜单选中值一样的话
		if (objs[i].Data==parentValue)
			//3.以子菜单，选项数据的值，选项数据的文本作为参数调用AddComitem
			AddComitem(child,objs[i].Value,objs[i].Text);		
	}
}
//1.删除子菜单的所有元素
function DelAllComitem(aList){   
	//传入的是select元素，让options全为null
	for(i=aList.options.length-1;i>=0;i--)
	aList.options[i]=null;
}
//3.添加子菜单的元素
function AddComitem(aList,aValue,aText){
	//用传入的文本和值来创建option
	var aOption=new Option(aText,aValue);
	//插入option（注：length属性比最大下标大1）
	aList.options[aList.options.length]=aOption;
}
</script>

2.

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<script language="JavaScript" type="text/javascript">

//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组

var city=[

["北京","天津","上海","重庆"],

["南京","苏州","南通","常州"],

["福州","福安","龙岩","南平"],

["广州","潮阳","潮州","澄海"],

["兰州","白银","定西","敦煌"]

];

function getCity(){

//获得省份下拉框的对象

var sltProvince=document.form1.province;

//获得城市下拉框的对象

var sltCity=document.form1.city;

//得到对应省份的城市数组

var provinceCity=city[sltProvince.selectedIndex - 1];

//清空城市下拉框，仅留提示选项

sltCity.length=1;

//将城市数组中的值填充到城市下拉框中

for(var i=0;i<provinceCity.length;i++){

sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);

}

}

</script>

</HEAD>

<BODY>

<FORM METHOD=POST ACTION="" name="form1">

<SELECT NAME="province" onChange="getCity()">

<OPTION VALUE="0">请选择所在省份 </OPTION>

<OPTION VALUE="直辖市">直辖市 </OPTION>

<OPTION VALUE="江苏省">江苏省 </OPTION>

<OPTION VALUE="福建省">福建省 </OPTION>

<OPTION VALUE="广东省">广东省 </OPTION>

<OPTION VALUE="甘肃省">甘肃省 </OPTION>

</SELECT>

<SELECT NAME="city">

<OPTION VALUE="0">请选择所在城市 </OPTION>

</SELECT>

</FORM>

</BODY>

</HTML>

3.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script>

function setSecond(obj){

var val = obj.value;

if(val == 'en'){

var sec = document.getElementById('second');

sec.options[0] = new Option("one","one");

sec.options[1] = new Option("two","two");

}else{

var sec = document.getElementById('second');

sec.options[0] = new Option("一","one");

sec.options[1] = new Option("二","two");//可设置循环配置，也可一个一个配置

}

}

</script>

</head>

<body>

<div>

<select id="first" onchange="setSecond(this)">

<option value="en">en</option>

<option value="zh">zh</option>

</select>

</div>

<div>

<select id="second">

</select>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航