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>
ajax省、市、编码联动

相关文章
