码迷,mamicode.com
首页 > 其他好文 > 详细

城市三级联动

时间:2017-09-05 13:28:59      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:三级联动   pen   bsp   pid   encode   三级   rip   style   where   

<div class="control-group">
                    <label class="control-label">区域</label>
                    <div class="controls">
                        <select name="sheng_id" id="provinces" style="width:140px">
                            <option value="-1">请选择省份</option>
                        </select>
                        &nbsp;&nbsp;省&nbsp;&nbsp;&nbsp;
                        <select name="shi_id" id="citys" style="width:140px">
                            <option value="-1">请选择城市</option>
                        </select>
                        &nbsp;&nbsp;市&nbsp;&nbsp;&nbsp;
                        <select name="qu_id" id="qu" style="width:140px">
                            <option value="-1">请选择城区</option>
                        </select>
                        &nbsp;&nbsp;区
                    </div>
                </div>

    <script>
            //  加载所有的省份
            $.ajax({
                type: "get",
                url: "__URL__/sheng", // type=1表示查询省份
                data: {"parent_id": "1", "type": "1"},
                dataType: "json",
                success: function(data) {
                    $("#provinces").html("<option value=‘‘>请选择省份</option>");
                    $.each(data, function(i, item) {
                        $("#provinces").append("<option value=‘" + item.id + "‘>" + item.name + "</option>");
                    });
                }
            });

            $("#provinces").change(function() {
                $.ajax({
                    type: "get",
                    url: "__URL__/sheng", // type =2表示查询市
                    data: {"parent_id": $(this).val(), "type": "2"},
                    dataType: "json",
                    success: function(data) {
                        $("#citys").html("<option value=‘‘>请选择市</option>");
                        $.each(data, function(i, item) {
                            $("#citys").append("<option value=‘" + item.id + "‘>" + item.name + "</option>");
                        });
                    }
                });
            });

            $("#citys").change(function() {
                $.ajax({
                    type: "get",
                    url: "__URL__/sheng", // type =2表示查询市
                    data: {"parent_id": $(this).val(), "type": "2"},
                    dataType: "json",
                    success: function(data) {
                        $("#qu").html("<option value=‘‘>请选择区</option>");
                        $.each(data, function(i, item) {
                            $("#qu").append("<option value=‘" + item.id + "‘>" + item.name + "</option>");
                        });
                    }
                });
            });
        });

    </script>

    //获取省市信息
    public function sheng(){
        $pid = I("get.parent_id");
        $type = I("get.type");//type=1表示查询省份 type =2表示查询市
        if($type ==1){
            $data=M("region")->where("parent_id=‘100000‘ and state=‘1‘")->select();
        } else if($type ==2){
            $data=M("region")->where("parent_id=‘$pid‘ and state=‘1‘")->select();
        }
        exit(json_encode($data));
    }

城市三级联动

标签:三级联动   pen   bsp   pid   encode   三级   rip   style   where   

原文地址:http://www.cnblogs.com/jhy-ocean/p/7478014.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!