溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

省市區(qū)三級聯(lián)動(dòng)和ajax模擬請求​

發(fā)布時(shí)間：2020-06-21 18:03:45 來源：網(wǎng)絡(luò) 閱讀：661 作者：quyunde 欄目：開發(fā)技術(shù)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="JQuery/jquery-1.11.0.js"></script>
        <script type="text/javascript">
            $().ready(function() {
                
                //點(diǎn)擊加載省份名稱
                $("#btn").click(function() {
//                    alert("asasassa");
                    //省份改變之前先清空原先存在城市的option
                    $("[name = 'sheng']").html("<option>==省份==</option>");
                    //省份改變之前先清空原先存在城市的option
                    $("[name = 'shi']").html("<option>==城市==</option>");
                    //省份改變之前先清空原先存在區(qū)縣的option
                    $("[name = 'qu']").html("<option>==區(qū)縣==</option>");
                    //請求數(shù)據(jù)
                    $.get("./json/sheng.json",
                            function(data) {
                                $(data).each(function(i) {
                                    //動(dòng)態(tài)加載option，并設(shè)置數(shù)據(jù)
                                    var opSheng = "<option></option>";
                                    $("[name='sheng']").append(opSheng);
                                    $("[name='sheng'] option").eq(i+1).text(data[i].name);
                                    $("[name='sheng'] option").eq(i+1).val(data[i].ProID);
                                });
                            
                            }),
                        "json"
                });
                //省份改變時(shí)執(zhí)行的方法
                $("[name='sheng']").bind("change", function() {
                    //省份改變之前先清空原先存在城市的option
                    $("[name = 'shi']").html("<option>==城市==</option>");
                    //省份改變之前先清空原先存在區(qū)縣的option
                    $("[name = 'qu']").html("<option>==區(qū)縣==</option>");
                    //獲得被點(diǎn)擊省份名稱
                    var shengID = $("[name = 'sheng'] option:selected").val();
                    //請求數(shù)據(jù)
                    $.get("./json/shi.json",
                        function(data) {
                            //作為option的下標(biāo)號(hào)
                            var index = 1;
                            $(data).each(function(i) {
                                if (shengID == data[i].ProID) {
                                    //動(dòng)態(tài)加載option，并設(shè)置數(shù)據(jù)
                                    var opShi = "<option></option>";
                                    $("[name='shi']").append(opShi);
                                    $("[name='shi'] option").eq(index).text(data[i].name);
                                    $("[name='shi'] option").eq(index).val(data[i].CityID);
                                    index++;
                                }
                            });
                        },
                        "json"
                    );
                });
                //城市改變時(shí)執(zhí)行的方法
                $("[name='shi']").bind("change", function() {
                    //獲得被選擇的城市名ID
                    var shiID = $("[name = 'shi'] option:selected").val();
                    //城市改變之前先清空原先存在區(qū)縣的option
                    $("[name = 'qu']").html("<option>==區(qū)縣==</option>");
                    //請求數(shù)據(jù)
                    $.get("./json/qu.json",
                        function(data) {
                            //作為option的下標(biāo)號(hào)碼
                            var index = 1;
                            $(data).each(function(i) {
                                
                                if (shiID == data[i].CityID) {
                                    //添加加區(qū)的option
                                    var opShi = "<option></option>";
                                    $("[name='qu']").append(opShi);
                                    $("[name='qu'] option").eq(index).text(data[i].DisName);
                                    $("[name='qu'] option").eq(index).val(data[i].CityID);
                                    index++;
                                }
                            });
                        },
                        "json"
                    );
                });
            
            });
        </script>
    </head>

    <body>
        <input type="button" name="btn" id="btn" value="導(dǎo)入省名稱" />
        <br>

        <select name="sheng" multiple="multiple">
            <!--<option>==省份==</option>-->
        </select>

        <select name="shi" multiple="multiple">
            <!--<option>==城市==</option>-->
        </select>

        <select name="qu" multiple="multiple">
            <!--<option>==區(qū)縣==</option>-->
        </select>
    </body>

</html>



附件：http://down.51cto.com/data/2366448
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手