一、知识点
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.onload=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>