zoukankan      html  css  js  c++  java
  • 城市三级联动

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

  • 相关阅读:
    「CH2401」送礼物 解题报告
    IO流总结
    关于Servlet中GET和POST方法的总结
    关于Java-枚举的总结
    JVM原理
    Form表单中method="post/get'的区别
    基于Servlet+JSP+JavaBean开发模式的用户登录注册
    浅谈jsp和servlet的区别
    serialVersionUID作用
    oracle的oci和thin区别
  • 原文地址:https://www.cnblogs.com/jhy-ocean/p/7478014.html
Copyright © 2011-2022 走看看