浏览 1652 次
|
锁定老帖子 主题：javascript七
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-12-28
省市级联选择： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changeCity(){
var province=document.myform.selProvince.value;
//alert(province);
var newOption1,newOption2;
switch(province){//根据用户选择的省份，动态创建“城市”下拉框选项
case "四川省" :
newOption1=new Option("成都市","chendu");//创建一个下拉框选项
newOption2=new Option("泸州市","luzhou");
break;
case "湖北省" :
newOption1=new Option("武汉市","wuhan");
newOption2=new Option("襄樊市","xiangfan");
break;
case "山东省" :
newOption1=new Option("青岛市","qingdao");
newOption2=new Option("烟台市","yantai");
break;
}
document.myform.selCity.options.length=0;
document.myform.selCity.options.add(newOption1);
document.myform.selCity.options.add(newOption2);
}
</script>
</head>
<body>
<form name="myform" action="">
省份：
<select name="selProvince" onChange="changeCity()">
<option>--请选择开户账号的省份--</option>
<option value="四川省">四川省</option>
<option value="山东省">山东省</option>
<option value="湖北省">湖北省</option>
</select>
城市：
<select name="selCity">
<option>--请选择开户帐号的城市--</option>
</select>
</form>
</body>
</html>
用数组优化省市级联选择： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changeCity(){
var cityList=new Array();
cityList[0]=['城都','绵阳','德阳','自贡','内江','乐山','南充','雅安','眉山','甘孜','凉山','泸州'];
cityList[1]=['济南','青岛','淄博','枣庄','东营','烟台','潍坊','济宁','泰安','威海','日照'];
cityList[2]=['武汉','宜昌','荆州','襄樊','黄石','荆门','黄冈','十堰','恩施','潜江'];
//获得省份选项的索引号，如四川省为1，比对应的数组索引号多1
var pIndex=document.myform.selProvince.selectedIndex-1;
var newOption1;
document.myform.selCity.options.length=0;//清空“城市”下拉框原内容
for(var j in cityList[pIndex]){
newOption1=new Option(cityList[pIndex][j],cityList[pIndex][j]);
document.myform.selCity.options.add(newOption1);
}
}
</script>
</head>
<body>
<form action="" name="myform">
省份：
<select name="selProvince" onChange="changeCity()">
<option>--请选择开户帐号的省份--</option>
<option value="四川省">四川省</option>
<option value="山东省">山东省</option>
<option value="湖北省">湖北省</option>
</select>
城市：
<select name="selCity">
<option>--请选择开户帐号的城市</option>
</select>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changeCity(){
var cityList=new Array();
cityList['山东省']=['城都','绵阳','德阳','自贡','内江','乐山','南充','雅安','眉山','甘孜','凉山','泸州'];
cityList['四川省']=['济南','青岛','淄博','枣庄','东营','烟台','潍坊','济宁','泰安','威海','日照'];
cityList['湖北省']=['武汉','宜昌','荆州','襄樊','黄石','荆门','黄冈','十堰','恩施','潜江'];
//获得省份选项的索引号，如四川省为1，比对应的数组索引号多1
var pIndex=document.myform.selProvince.value;
var newOption1;
document.myform.selCity.options.length=0;//清空“城市”下拉框原内容
for(var j in cityList[pIndex]){
newOption1=new Option(cityList[pIndex][j],cityList[pIndex][j]);
document.myform.selCity.options.add(newOption1);
}
}
</script>
</head>
<body>
<form action="" name="myform">
省份：
<select name="selProvince" onChange="changeCity()">
<option>--请选择开户帐号的省份--</option>
<option value="四川省">四川省</option>
<option value="山东省">山东省</option>
<option value="湖北省">湖北省</option>
</select>
城市：
<select name="selCity">
<option>--请选择开户帐号的城市</option>
</select>
</form>
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-12-29
貌似 用不了。。。
 楼主解释一下哦
|
| 返回顶楼 | |
|
发表时间：2011-12-29
chinalmq说：
引用 貌似 用不了。。。 楼主解释一下哦
你怎么用的啊。我试过啊，可以用啊？？ |
| 返回顶楼 | |
