<!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" style="width: 150px;height: 200px;" multiple="multiple">
            <!--<option>==省份==</option>-->
        </select>
        <select name="shi" style="width: 150px;height: 200px;" multiple="multiple">
            <!--<option>==城市==</option>-->
        </select>
        <select name="qu" style="width: 150px;height: 200px;"multiple="multiple">
            <!--<option>==区县==</option>-->
        </select>
    </body>
</html>