<body>
<div id="box">
<!--Select下拉框onchange事件获取option的value值-->
<select name="" id="sheng" style="width: 100px;" onchange="ch(this)">
<option value="">请选择</option>
</select>
<select name="" id="shi" style="width: 100px;" onchange="ch1(this)">
</select>
<select name="" id="qu" style="width: 100px;">
</select>
</div>
</body>
<script type="text/javascript">
var sheng = document.getElementById("sheng");
var shi = document.getElementById("shi");
var qu = document.getElementById("qu");
var shengArr = ["北京", "上海", "山东"];
var shiArr = [
["东城", "昌平", "海淀"],
["浦东", "高区"],
["济南", "青岛"]
];
var quArr = [
[
["东城1", "东城2", "东城3"],
["昌平1", "昌平2", "昌平3"],
["海淀1", "海淀2", "海淀3"]
],
[
["浦东1", "浦东2", "浦东3"],
["高区1", "高区2"]
],
[
["济南1", "济南2"],
["青岛1", "青岛2"]
]
]
//先设置省的值
for (var i = 0; i < shengArr.length; i++) {
var s = new Option(shengArr[i], i);
sheng.options.add(s);
}
//设置一个省的公共下标
var index = -1;
function ch(obj){
if (obj.value == -1) {
//option 集合可返回包含 <select> 元素中所有 <option> 的一个数组
qu.options.length = 0;
shi.options.length = 0;
}
//获取值
var val = obj.value;
index = obj.value;
//获取市
var cs = shiArr[val];
//获取默认区
var as = quArr[val][0];
//先清空市和区
shi.options.length = 0;
qu.options.length = 0;
for (var i = 0; i < cs.length; i++) {
//第一个参数是option的文本值，第二个参数是option的value值
var op = new Option(cs[i], i);
shi.options.add(op);
}
for (var i = 0; i < as.length; i++) {
var op = new Option(as[i], i);
qu.options.add(op);
}
}
function ch1(obj){
//selectedIndex 属性可设置或返回下拉列表中被选选项的索引号
var val = obj.selectedIndex;
var as = quArr[index][val];
qu.options.length = 0;
for (var i = 0; i < as.length; i++) {
var op = new Option(as[i], i);
qu.options.add(op);
}
}
</script>