JS应用实例6：二级联动

最新推荐文章于 2021-09-13 20:29:53 发布

weixin_30257433

最新推荐文章于 2021-09-13 20:29:53 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/xuyiqing/p/8378459.html

版权

本案例很常用，应用场景：注册页面填写籍贯，省市二级联动

总体思想：创建一个二维数组存入省市，获取选中的省份并比较，创建标签遍历添加

代码：

<!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>

View Code

效果：

这里如果选择了湖北，后边下拉框的内容就会自动变成相应的城市

转载于:https://www.cnblogs.com/xuyiqing/p/8378459.html

weixin_30257433

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS应用实例6：二级联动

本案例很常用，应用场景：注册页面填写籍贯，省市二级联动总体思想：创建一个二维数组存入省市，获取选中的省份并比较，创建标签遍历添加代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>注...
复制链接

扫一扫