今天用到两个关联的select，整理一下代码，仅供参考
如下：
<html>
<head>
<meta charset=“UTF-8”>
<title></title>
</head>
<script language=”javascript”>
function changeProvince() {
var slecctS = document.querySelectorAll(“.select”);
var countrys = new Array();
countrys[“0”] = [“–请选择所在省份和地区–“];
countrys[“北京市”] = [“朝阳区”, “东城区”, “西城区”, “海淀区”, “宣武区”, “丰台区”];
countrys[“上海市”] = [“宝山区”, “长宁区”, “闵行区”, “杨浦区”,”黄浦区”,”虹口区”,”静安区”];
countrys[“广州省”] = [“广州市”, “珠海市”, “汕头市”, “揭阳市”, “潮州市”, “湛江市”];
countrys[“深圳市”] = [“福田区”, “南山区”, “宝安区”, “龙岗区”, “盐田区”, “罗湖区”];
countrys[“重庆市”] = [“万州区”, “渝中区”, “大渡口区”, “江北区”, “沙坪坝区”, “渝北区”];
countrys[“天津市”] = [“和平区”, “河东区”, “河西区”, “南开区”, “红桥区”, “武清区”];
var value = slecctS[0].value;
//option 集合可返回包含 <select> 元素中所有 <option> 的一个数组。
//注意： 数组中的每个元素对应一个 <option> 标签 – 由 0 起始。
slecctS[1].options.length = 0;
var option;
for(i = 0; i < countrys[value].length; i++) {
//new Option(“文本”,”值”,true,true)
//后面两个true分别表示默认被选中和有效!
option = new Option(countrys[value][i], countrys[value][i]);
slecctS[1].options.add(option);
slecctS[1].options.selected=countrys[value][0];
}
if(slecctS[0].value == “0”){
slecctS[1].disabled = true;
}
else{
slecctS[1].disabled = false;
}
}
</script>
</head>
<body>
<form method=”post” action=”” name=”myForm”>
国家：
<select name=”country” onChange=”changeProvince()” class=”select”>
<option value=“0”>–请选择省/城市–</option>
<option value=“北京市”>北京市</option>
<option value=“上海市”>上海市</option>
<option value=“广州省”>广州省</option>
<option value=“深圳市”>深圳市</option>
<option value=“重庆市”>重庆市</option>
<option value=“天津市”>天津市</option>
</select>
<select name=”province” class=”select”>
<option>–请选择所在省份和地区–</option>
</select>
</form>
</body>
</html>
<!–
with(document){}
with 语句用于设置代码在特定对象中的作用域
with(document)
{.title=’aaa’;
}相当于：
document.title=’aaa’;
option的属性：
| 属性 | 描述 |
|---|---|
| length | 返回集合的option元素数目 |
| selectedIndex | 设置或者返回select对象已选选项的索引值。(以 0 起始) |
option的方法：
| index] | 以数字形式指定元素索引 (以 0 开始) |
| [add(element[,index])] | 在集合中添加option元素 |
| item(index) | 以数字索引返回集合中元素 |
| namedItem(name) | 以名称为索引返回集合元素 |
| remove(index) | 从集合中移除元素 |
–>
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/13884.html