JS应用实例6：二级联动
2018-06-24 01:27:13来源：未知 阅读 ()
本案例很常用，应用场景：注册页面填写籍贯，省市二级联动
总体思想：创建一个二维数组存入省市，获取选中的省份并比较，创建标签遍历添加
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面重新布局</title> <script> //1.创建一个二维数组用于存储省份和城市 var cities = new Array(3); cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市"); cities[1] = new Array("长沙市", "郴州市", "株洲市", "岳阳市"); cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市"); cities[3] = new Array("郑州市", "洛阳市", "开封市", "安阳市"); function changeCity(val) { //7.获取第二个下拉列表 var cityEle = document.getElementById("city"); //9.清空第二个下拉列表的option内容 cityEle.options.length = 0; //2.遍历二维数组中的省份 for(var i = 0; i < cities.length; i++) { //注意，比较的是角标 if(val == i) { //3.遍历用户选择的省份下的城市 for(var j = 0; j < cities[i].length; j++) { //alert(cities[i][j]); //4.创建城市的文本节点 var textNode = document.createTextNode(cities[i][j]); //5.创建option元素节点 var opEle = document.createElement("option"); //6.将城市的文本节点添加到option元素节点 opEle.appendChild(textNode); //8.将option元素节点添加到第二个下拉列表中去 cityEle.appendChild(opEle); } } } } </script> </head> <body> <div id="content"> <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white"> <form method="get" action="#" onsubmit="return checkForm()"> <tr> <td colspan="2" align="center"> <font size="5">会员注册</font> </td> </tr> <tr> <td> 用户名 </td> <td> <input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span> </td> </tr> <tr> <td>确认密码</td> <td> <input type="password" name="repassword" /> </td> </tr> <tr> <td>email</td> <td> <input type="text" name="email" id="email" /> </td> </tr> <tr> <td>姓名</td> <td> <input type="text" name="name" /> </td> </tr> <tr> <td>籍贯</td> <td> <select onchange="changeCity(this.value)"> <option>--请选择--</option> <option value="0">湖北</option> <option value="1">湖南</option> <option value="2">河北</option> <option value="3">河南</option> </select> <select id="city"> </select> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <td>出生日期</td> <td> <input type="text" name="birthday" /> </td> </tr> <tr> <td>验证码</td> <td> <input type="text" name="yanzhengma" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册" /> </td> </tr> </form> </table> </div> </body> </html>
效果：
这里如果选择了湖北，后边下拉框的内容就会自动变成相应的城市
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：小刘同学的第三十六篇博文
下一篇：JS应用实例3：定时弹出广告
- JavaScript函数表达式详解及实例 2020-03-25
- 微信小程序开发图片拖拽实例详解 2020-03-16
- jQuery查找节点方法完整实例 2020-02-21
- jQuery表单对象属性过滤选择器实例详解 2020-02-21
- 麻雀虽小五脏俱全 Dojo自定义控件应用 2020-02-20
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
