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;// 默认选择第一项。
}