js 下拉列表框操作

最新推荐文章于 2024-11-30 20:12:22 发布

XJWF117

最新推荐文章于 2024-11-30 20:12:22 发布

阅读量438

点赞数

CC 4.0 BY-SA版权

分类专栏： Java

本文链接：https://blog.youkuaiyun.com/XJWF117/article/details/20799361

Java 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的下拉列表联动效果。通过两个下拉列表的级联选择，展示不同省份及其对应的城市选项。文章提供了具体的HTML结构及JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js下拉列表框分为两种，一种是加载时就添加生成，另一种是根据其他的下拉列表框的联动

测试环境，一个表单，2个select框

<FORM action="intro.html" method="post" name="myform" onSubmit="return check()">
<SELECT name="selProvince" id="selProvince" onChange="changeCity( )" style="WIDTH: 130px"> <OPTION value="">--选择省份--</OPTION></select>
<SELECT name="selCity" id="selCity" style="WIDTH: 130px"> <OPTION>--选择城市--</OPTION></select>
</Form>

1.首先

定义数组

var cityList = new Array();
        cityList['北京市'] = ['北京市','朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];
	cityList['上海市'] = ['上海市','宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];
	cityList['广州省'] = ['广州省','广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];

1.第一种加载时列表框填充

 window.onload = function(){
	    for(var i in cityList){
		   document.myform.selProvince.options.add(new Option(i,i));
		}
		document.myform.selProvince.selectedIndex =0;//默认选择第一项
	 }

通过 i从cityList中循环 myform ：表单名，selProvince：控件名，因为数组下标就是中文名因此通过add直接添加了相应的值。

2.第二种通过另一个下拉框添加

	 function changeCity(){
	    var province = document.myform.selProvince.value;//上一个select选中的值
		
		document.myform.selCity.options.length=0;//清空原来内容
		if (province=="")//这里取决于默认项目的value值，如果没有人为确定此值，这里很可能出现bug
		{
		  return;
		}
		var citys = cityList[province];//由定义数组看出，citys也是一个数组如：cityList['北京市'] = ['北京市','朝阳区',。。。。。'];
		for(var i=0;i<citys.length;i++){//数组长度即循环次数
		   document.myform.selCity.options.add(new Option(citys[i],citys[i]));根据数组的下标位置的值citys[i]添加select的value和标示符
		}
		document.myform.selCity.options.selectIndex=0;//   默认选择第一项。
	 }