温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

省市区三级联动和ajax模拟请求

发布时间:2020-08-05 14:40:07 来源:网络 阅读:610 作者:quyunde 栏目:开发技术

<!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() {
                
                //点击加载省份名称
                $("#btn").click(function() {
//                    alert("asasassa");
                    //省份改变之前先清空原先存在城市的option
                    $("[name = 'sheng']").html("<option>==省份==</option>");
                    //省份改变之前先清空原先存在城市的option
                    $("[name = 'shi']").html("<option>==城市==</option>");
                    //省份改变之前先清空原先存在区县的option
                    $("[name = 'qu']").html("<option>==区县==</option>");
                    //请求数据
                    $.get("./json/sheng.json",
                            function(data) {
                                $(data).each(function(i) {
                                    //动态加载option,并设置数据
                                    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"
                });
                //省份改变时执行的方法
                $("[name='sheng']").bind("change", function() {
                    //省份改变之前先清空原先存在城市的option
                    $("[name = 'shi']").html("<option>==城市==</option>");
                    //省份改变之前先清空原先存在区县的option
                    $("[name = 'qu']").html("<option>==区县==</option>");
                    //获得被点击省份名称
                    var shengID = $("[name = 'sheng'] option:selected").val();
                    //请求数据
                    $.get("./json/shi.json",
                        function(data) {
                            //作为option的下标号
                            var index = 1;
                            $(data).each(function(i) {
                                if (shengID == data[i].ProID) {
                                    //动态加载option,并设置数据
                                    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"
                    );
                });
                //城市改变时执行的方法
                $("[name='shi']").bind("change", function() {
                    //获得被选择的城市名ID
                    var shiID = $("[name = 'shi'] option:selected").val();
                    //城市改变之前先清空原先存在区县的option
                    $("[name = 'qu']").html("<option>==区县==</option>");
                    //请求数据
                    $.get("./json/qu.json",
                        function(data) {
                            //作为option的下标号码
                            var index = 1;
                            $(data).each(function(i) {
                                
                                if (shiID == data[i].CityID) {
                                    //添加加区的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="导入省名称" />
        <br>

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

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

        <select name="qu" multiple="multiple">
            <!--<option>==区县==</option>-->
        </select>
    </body>

</html>



向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI