<html>
<head>
<script>
//function change(){
//数组,js中的数组可以实现不管究竟有多长
//而且也可以不管是一维数组还是二维数组
//var cityList = new Array();
//在js中,数组除了可以用索引去指代某一个元素
//还可以直接用元素名称去指代一个元素
//cityList['湖南'] = ['长沙','岳阳','衡阳','郴州'];
//cityList['海南'] = ['三亚','海口','东方','儋州'];
//cityList['浙江'] = ['温州','杭州','衡阳','郴州'];
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]);
}
// alert(document.getElementById("province").value);
}
</script>
</head>
<body>
<form name="form1">
<select id="province" οnchange="getCity()">
<option>请选择你所在的省份</option>
<option>湖南</option>
<option>海南</option>
<option>浙江</option>
</select>
<select id="city" >
<option value="0">请选择你所在的市</option>
</select>
</form>
</body>
</html>
或者下面的
<!--这段代码比较简单。
如果对js不大熟悉,可以看看下面关于js处理select对象的内容:
1、使用selectedIndex属性获取当前选项的索引
下拉框的选项是一个线性数组,每个选项都有一个索引,selectedIndex表示当前被选中的选项的索引号。结合options属性,可以得到被选中的option对象,从而对其做进一步的处理。当下拉框可多选时,selectedIndex属性返回第一个被选中的索引。
selectedIndex是个只读的属性,想把通过索引指定的下拉框的项设置为选中状态,可以设置option对象的selected=true来实现。
2、为select对象添加一个选项
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
new Option(provinceCity[i],provinceCity[i])表示创建一个值为provinceCity[i],文本为provinceCity[i]的option对象,sltCity是页面上的city对象,i+1指定新添选项的位置。
3、清空一个select对象
要将下拉框的所有选项删除有两种方法,
第一种方法就是遍历删除:
1 var l=myselect.length;
2 for(var i=0;i<l;i++){
3 myselect.options[i]=null;
4 }
第二种方法比较简单,因此一般都使用此方法:
myselect.length=0;-->
<HTML>
<HEAD>
<meta charset="UTF-8">
<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>