ajax（省、市、編碼聯動）

時間 2019-11-18

標籤 ajax 編碼聯動欄目 Ajax 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <select class="province">
                <option>---選擇省---</option>
            </select>
            <select class="city">
                <option>---選擇市---</option>
            </select>
            <select class="coding">
                <option>---選擇編碼---</option>
            </select>
        </div>
    </body>
    <script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $.get("city.json",function(data,status){                                        //get獲取數據
            if (status) {                                                               //找到數據的時候執行
                $.each(data.城市代碼, function(i,el) {                                     //遍歷城市代碼
                    var str = "<option>"+el.省+"</option>";                              //找出省           
                    $(".province").append(str);                                             //添加到選擇區
                });
                $(".province").change(function(){                                         //當省變更的時候
                    $(".city").html("<option>---選擇市---</option>")                         //清除上一次選的城市
                    $(".coding").html("<option>---選擇編碼---</option>")                    //清除上一次選的編碼
                    $(data.城市代碼).each(function(i,el){
                        if ($(".province").val() == el.省) {                                //找到所選取的省     由於省和市的下標是一致的
                            $(el.市).each(function(index,ele){                            //遍歷全部找到的市
                                var str = "<option>"+ele.市名+"</option>"                    //找出市名
                                $(".city").append(str);                                    
                            })
                        }
                    })
                })
                $(".city").change(function(){                                            //當市變更的時候
                    $(data.城市代碼).each(function(i,el){
                        if ($(".province").val() == el.省) {
                            $(el.市).each(function(index,ele){
                                if ($(".city").val() == ele.市名){                        //找到選取的市名
                                    var str = "<option>"+ele.編碼+"</option>"                //編碼跟市名同級
                                    $(".coding").html(str);                                 //替換編碼的內容
                                }
                            })
                        }
                    })
                })
            }
        })
    </script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。