js 下拉列表框操作

本文介绍了一种使用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;//   默认选择第一项。
	 }


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值