省市联动

Posted 022414ls

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了省市联动相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册页面重新布局</title>
        <style type="text/css">
            .top {
                border: 1px solid red;
                width: 32.9%;
                height: 50px;
                float: left;
            }
            
            #clear {
                clear: both;
            }
            
            #menu {
                border: 1px solid blue;
                width: 99%;
                height: 40px;
                background-color: black;
            }
            
            #menu ul li {
                display: inline;
                color: white;
                font-size: 19px;
            }
            
            #bottom {
                text-align: center;
            }
            
            #contanier {
                border: 1px solid red;
                width: 99%;
                height: 600px;
                background: url(../../img/regist_bg.jpg);
                position: relative;
            }
            
            #content {
                border: 5px solid gray;
                width: 50%;
                height: 60%;
                position: absolute;
                top: 100px;
                left: 300px;
                background-color: white;
                padding-top: 50px;
            }
        </style>
        
        <script type="text/javascript">
            //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++){
                            //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>

            <!--1.logo部分的div-->
            <div>
                <!--切分为3个小的div-->
                <div class="top">
                    <img src="../../img/logo2.png" height="47px" />
                </div>
                <div class="top">
                    <img src="../../img/header.png" height="47px" />
                </div>
                <div class="top" style="padding-top: 15px;height: 35px;">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
            <!--清除浮动-->
            <div id="clear">

            </div>
            <!--2.导航栏部分的div-->
            <div id="menu">
                <ul>
                    <li>首页</li>
                    <li>电脑办公</li>
                    <li>手机数码</li>
                    <li>孕婴保健</li>
                    <li>鞋靴箱包</li>
                </ul>
            </div>
            <!--3.中间注册表单部分div-->
            <div id="contanier">
                <div id="content">
                    <table border="1" align="center" cellpadding="1" 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>
                            <!--1.编写HTML文件部分的内容-->
                            <tr>
                                <td>籍贯</td>
                                <td>
                                    <!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
                                    <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" />
                                    <img src="../img/yanzhengma.png" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="submit" value="注册" />
                                </td>
                            </tr>
                        </form>
                    </table>
                </div>
            </div>
            <!--4.广告图片的div-->
            <div id="">
                <img src="../../img/footer.jpg" width="99%" />
            </div>
            <!--5.超链接与版权信息的div-->
            <div id="bottom">
                <a href="#">关于我们 </a>
                <a href="#">联系我们 </a>
                <a href="#">招贤纳士 </a>
                <a href="#">法律声明</a>
                <a href="#">友情链接</a>
                <a href="#">支付方式</a>
                <a href="#">配送方式 </a>
                <a href="#">服务声明 </a>
                <a href="#">广告声明 </a>
                <p>Copyright © 2005-2016 传智商城 版权所有 </p>
            </div>
        </div>
    </body>

</html>

 

1 创建一个二维数组用于存储省份和城市

2 遍历二维数组中的省份

3 遍历用户选择的省份下的城市

4 创建城市的文本节点

5 创建option 元素节点

6 将城市的文本节点添加到option元素节点

7 获取第二个下拉列表

8 将option元素节点添加到第二个下拉列表中去

9 清空第二个下拉列表的option内容

以上是关于省市联动的主要内容，如果未能解决你的问题，请参考以下文章

省市区县街道四级联动下拉菜单

三级联动 省市 ajax的代码

三级联动 省市 ajax的代码

ajax省市区三级联动

省市联动 js

省市区三级菜单联动插件