一、知识点
HTML DOM Option 对象:
Option 对象代表 HTML 表单中下拉列表中的一个选项。在 HTML 表单中 <option> 标签每出现一次,一个 Option 对象就会被创建。可通过表单的 elements[] 数组访问一个 Option 对象,或者通过使用 document.getElementById()访问;
Option()有2个参数,第一个参数是添加的内容 第二个参数是所添加内容的value值
二、步骤
1.由于无法调用数据库,所以先构建几个数组存储数据;
2.添加dom动态创建下拉选项;
3.添加省、市文本改变事件,当省级选择项改变,市级文本内容会发生相应的变化;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动demo</title>
<script>
window.οnlοad=function() {
//定义几个省市区的数据
var sheng_city = [
["陕西省"],
["江苏省"],
["山东省"]
];
var shi_city = [
["西安市", "咸阳市", "宝鸡市"],
["淮安市", "盐城市", "扬州市"],
["济南市", "德州市", "聊城市"]
];
var qu_city = [
[
["高新区", "长安区", "未央区"],
["秦都区", "咸阳区1", "咸阳区2"],
["金台区", "成仓区", "渭滨区"]
],
[
["淮安区1", "淮安区2", "淮安区3"],
["盐城区1", "盐城区2", "盐城区3"],
["扬州区1", "扬州区2", "扬州区3"]
],
[
["济南区1", "济南区2", "济南区3"],
["德州区1", "德州区2", "德州区3"],
["聊城区1", "聊城区2", "聊城区3"]
]
];
//动态创建dom元素 添加省级选项
var sheng = document.getElementById("sheng");
for (var i = 0; i < sheng_city.length; i++) {
var option = new Option(sheng_city[i], i);
sheng.appendChild(option);
}
//添加省文本改变事件
var shi = document.getElementById("shi");
var s_index = 0;//定义变量索引
sheng.onchange = function () {
shi.options.length = 1;
qu.options.length = 1;
s_index = this.value;
for (var i = 0; i < shi_city.length; i++) {
var option = new Option(shi_city[s_index][i], i);
shi.appendChild(option);
}
};
//添加市文本改变事件
var qu = document.getElementById("qu");
var q_index = 0;
shi.onchange = function () {
qu.options.length=1;
q_index = this.value;
for (var i = 0; i < qu_city.length; i++) {
var option = new Option(qu_city[s_index][q_index][i], i);
qu.appendChild(option);
}
}
}
</script>
</head>
<body>
省: <select id="sheng">
<option>---请选择---</option>
</select>
市: <select id="shi">
<option>---请选择---</option>
</select>
区: <select id="qu">
<option>---请选择---</option>
</select>
</body>
</html>