jQuery_完成省市二級聯動

時間 2021-08-12

標籤 javascript css html java jquery app ide 函數 this url 欄目 JQuery 简体版

原文原文鏈接

當填表的時候會讓你設計某省某市怎麼設計，應該明白，若是你選擇了一個肯定的省，那麼在第二個下拉框內則不會有除了你選擇的省的市以外的名稱。而這功能用js來實現很麻煩，可是用jq確很容易實現。javascript

原表結構：css

代碼以下：html

<!DOCTYPE html>
<html>
<head>
<script typr="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
        var cities=new Array(3);
        cities[0]=new Array("武漢市","黃岡市","襄陽市","荊州市");
        cities[1]=new Array("長沙市","郴州市","株洲市","岳陽市");
        cities[2]=new Array("石家莊市","邯鄲市","唐山市","秦皇島市");
        cities[3]=new Array("鄭州市","洛陽市","開封市","安陽市");
    $(function() {
        $("#province").change(function() {//change時間，表示下拉框的內容改變，則會提示點擊了省份
//         alert("點擊了省份");
        var val=this.value;//獲取用戶選擇的省份
//         alert(val);
        $.each(cities,function(i,n){//遍歷城市
//             alert(i+" "+n);
        if(val==i){//若是相等
            $.each(cities[i],function(j,m){//遍歷第二個下拉框內容
//                 alert(m);
        var textNode =document.createTextNode(m);//建立城市的文本節點
        var opele=document.createElement("option");//建立option元素節點
        $(opele).append(textNode);//將城市文本節點添加到option元素中
        $(opele).appendTo($("#city"));//將內容添加到第二個下拉框中，使用id選擇器。
        
            })
            
        }
            
        })
        
        });
    });
</script>

<meta charset="UTF-8">
<title>使用jQuery完成省市二級聯動</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 src="../js/check1.js"></script>


</head>
<body>
    <div>
        <div id="contanier">
            <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>
                        <!--1.編寫HTML文件部分的內容-->
                        <tr>
                            <td>籍貫</td>
                            <td>
                                <!--2.肯定事件，經過函數傳參的方式拿到改變後的城市--> <select id="province">
                                    <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>
    </div>
</body>
</html>

運行結果java

體會：完成一個項目可能有不少方法，可是有的簡單，有的困難，所以要選取簡單的進行使用。jquery

另外，每次完成一小步，就要檢測一次，哪怕最後註釋掉，也不要認爲本身能一蹴而成，由於一步一步完成出錯好改，可是全都完成了，找錯都不容易找出來，更別說改錯了，所以要養成這個好習慣。app