JS——省市二级联动

Posted Dream

tags:

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

1、核心代码:

<script>
            var cities = new Array(11);
            cities[0] = new Array("东城区","西城区" ,"崇文区", "宣武区" ,"朝阳区" ,"丰台区","石景山区" ,"海淀区门" ,"头沟区");
            cities[1] = new Array();
            cities[2] = new Array();
            cities[3] = new Array();
            cities[4] = new Array();
            cities[5] = new Array();
            cities[6] = new Array();
            cities[7] = new Array();
            cities[8] = new Array();
            cities[9] = new Array();
            cities[10] = new Array();
            cities[11] = new Array();
            function changeCity(val){
                var cityEle = document.getElementById("city");
                cityEle.options.length=0;
                for(var i=0;i<cities.length;i++){
                    if(val==i){
                        for(var j=0;j<cities[i].length;j++){
                            var textNode = document.createTextNode(cities[i][j]);
                            var opEle = document.createElement("option");
                            opEle.appendChild(textNode);
                            cityEle.appendChild(opEle);
                        }
                    }
                }
            }
</script>

其中用到了数组的遍历、DOM。

 <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>
                                    <option value="4">黑龙江</option>
                                    <option value="5">吉林</option>
                                    <option value="6">辽宁</option>
                                    <option value="7">河南</option>
                                    <option value="8">湖北</option>
                                    <option value="9">湖南</option>
                                    <option value="10">台湾</option>
                                    <option value="11">澳门</option>
                                </select>
                                <select id="city">
                                    
                                </select>
                            </td>

2、完整代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>省市二级联动</title>
        <script>
            function showTips(id,info){
                document.getElementById(id+"span").innerHTML="<font color=\'gray\'>"+info+"</font>";
            }
            
            function check(id,info){
                var uValue = document.getElementById(id).value;
                if(uValue==""){
                    document.getElementById(id+"span").innerHTML="<font color=\'red\'>"+info+"</font>";
                }else{
                    document.getElementById(id+"span").innerHTML="";
                }
            }
        </script>
        
        <script>
            var cities = new Array(11);
            cities[0] = new Array("东城区","西城区" ,"崇文区", "宣武区" ,"朝阳区" ,"丰台区","石景山区" ,"海淀区门" ,"头沟区");
            cities[1] = new Array();
            cities[2] = new Array();
            cities[3] = new Array();
            cities[4] = new Array();
            cities[5] = new Array();
            cities[6] = new Array();
            cities[7] = new Array();
            cities[8] = new Array();
            cities[9] = new Array();
            cities[10] = new Array();
            cities[11] = new Array();
            function changeCity(val){
                var cityEle = document.getElementById("city");
                cityEle.options.length=0;
                for(var i=0;i<cities.length;i++){
                    if(val==i){
                        for(var j=0;j<cities[i].length;j++){
                            var textNode = document.createTextNode(cities[i][j]);
                            var opEle = document.createElement("option");
                            opEle.appendChild(textNode);
                            cityEle.appendChild(opEle);
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
            <tr>
                <td height="600px" ">
                    <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
                        <table border="1px" width="450px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
                            <tr>
                                <td>
                                            用户名
                                </td>
                                <td>
                                    <input type="text" name="user" size="34px" id="user" 
                                        onfocus="showTips(\'user\',\'用户名必填!\')" 
                                        onblur="check(\'user\',\'用户名不能为空!\')"/>
                                        <span id="userspan"></span>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    密码
                                </td>
                                <td>
                                    <input type="password" name="password" size="34px" id="password"  
                                        onfocus="showTips(\'password\',\'密码必填\')"
                                        onblur="check(\'password\',\'密码不能为空!\')"/>
                                        <span id="passwordspan"></span>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    确认密码
                                </td>
                                <td>
                                    <input type="password" name="repassword" size="34px" id="repassword"></input>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    Email
                                </td>
                                <td>
                                    <input type="text" name="email" size="34px" id="email"/>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    姓名
                                </td>
                                <td>
                                    <input type="text" name="username" size="34px" id="username"></input>
                                </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" size="34px" id="birthday"></input>
                                </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>
                                    <option value="4">黑龙江</option>
                                    <option value="5">吉林</option>
                                    <option value="6">辽宁</option>
                                    <option value="7">河南</option>
                                    <option value="8">湖北</option>
                                    <option value="9">湖南</option>
                                    <option value="10">台湾</option>
                                    <option value="11">澳门</option>
                                </select>
                                <select id="city">
                                    
                                </select>
                            </td>
                        </tr>
                            
                            <tr>
                                <td colspan="2">
                                    <center>
                                    <input type="submit" value="注册" />
                                    </center>
                                </td>
                            </tr>
                        </table>
                    </form>
                </td>                
            </tr>
        </table>
    </body>
</html>

显示效果:

 

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

JS实现省市二级联动

js省市二级联动实例

js 省市二级联动

jQuery_完成省市二级联动

省市二级联动--使用app-jquery-cityselect.js插件

29_用js实现一个省市级联效果