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));
        }

  • 相关阅读:
    time和/usr/bin/time
    Linux系统-real/user/sys time
    PL/SQL:集合类型 (定义,分类,使用场景,集合方法)
    关于Android开发中使用的XML
    Android Studio 常用快捷键
    Android中Adapter总结
    Android 中的 Context
    Android Studio 项目结构
    Android Studio 连接真机调试
    Android Studio 入门
  • 原文地址:https://www.cnblogs.com/jhy-ocean/p/7478014.html
Copyright © 2011-2022 走看看