select两个关联的下拉列表

最新推荐文章于 2022-11-17 14:57:31 发布

weixin_30632089

最新推荐文章于 2022-11-17 14:57:31 发布

阅读量518

点赞数

文章标签： c# javascript ViewUI

原文链接：http://www.cnblogs.com/simba-lkj/p/6014838.html

版权

今天用到两个关联的select，整理一下代码，仅供参考

如下：

<html>

<head>

</head>

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>

国家：

</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)	从集合中移除元素