layui的三级联动

最新推荐文章于 2024-05-15 18:15:18 发布

shao_keke

最新推荐文章于 2024-05-15 18:15:18 发布

阅读量9.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_37584159/article/details/80415212

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <meta name="renderer" content="webkit">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="format-detection" content="telephone=no">  
        <link rel="stylesheet" href="src/css/layui.css" />  
    </head>  
    <body>  
        <div class="layui-form">  
            <div class="layui-input-inline">  
                <select name="province" lay-filter="province" class="province">  
                    <option value="">请选择省</option>  
                </select>  
            </div>  
            <div class="layui-input-inline">  
                <select name="city" lay-filter="city" disabled>  
                    <option value="">请选择市</option>  
                </select>  
            </div>  
            <div class="layui-input-inline">  
                <select name="area" lay-filter="area" disabled>  
                    <option value="">请选择县/区</option>  
                </select>  
            </div>  
        </div>  
    </body>  
    <script type="text/javascript" src="src/layui.js"></script>  
    <script type="text/javascript" src="src/address.js"></script>  
    <script type="text/javascript">  
        layui.config({  
            base : "src/" //address.js的路径  
        }).use([ 'layer', 'jquery', "address" ], function() {  
            var layer = layui.layer, $ = layui.jquery, address = layui.address();  
  
        });  
    </script>  
<html>

JS:  address.js


layui.define(["form","jquery"],function(exports){  
    var form = layui.form,  
    $ = layui.jquery,  
    Address = function(){};  
  
    Address.prototype.provinces = function() {  
        //加载省数据  
        var proHtml = '',that = this;  
        $.get("area",{code:'',type:1}, function (pro) {


            for (var i = 0; i < pro.length; i++) {
                proHtml += '<option value="' + pro[i].code + '">' + pro[i].name + '</option>';
            }  
            //初始化省数据  
            $("select[name=province]").append(proHtml);  
            form.render();  
            form.on('select(province)', function (proData) {


                $("select[name=area]").html('<option value="">请选择县/区</option>');
                var value = proData.value;




                if (value > 0) {
                    $.post('area',{code:value,type:2},function (val) {
                        //console.log(val.length) ;
                        that.citys(val) ;
                    },"json");
                    //that.citys(pro[$(this).index() - 1].childs);


                } else {
                    $("select[name=city]").attr("disabled", "disabled");
                }
            });
        },'json');
    }
  
    //加载市数据  
    Address.prototype.citys = function(citys) {


        var cityHtml = '<option value="">请选择市</option>',that = this;  
        for (var i = 0; i < citys.length; i++) {  
            cityHtml += '<option value="' + citys[i].code + '">' + citys[i].name + '</option>';  
        }  
        $("select[name=city]").html(cityHtml).removeAttr("disabled");  
        form.render();  
        form.on('select(city)', function (cityData) {  
            var value = cityData.value;  
            if (value > 0) {
                $.post('area',{code:value,type:3},function (area) {
                    that.areas(area) ;
                },"json");
                //that.areas(citys[$(this).index() - 1].childs);
            } else {  
                $("select[name=area]").attr("disabled", "disabled");  
            }  
        });  
    }  
  
    //加载县/区数据  
    Address.prototype.areas = function(areas) {  
        var areaHtml = '<option value="">请选择县/区</option>';  
        for (var i = 0; i < areas.length; i++) {  
            areaHtml += '<option value="' + areas[i].code + '">' + areas[i].name + '</option>';  
        }  
        $("select[name=area]").html(areaHtml).removeAttr("disabled");  
        form.render();  
    }  
  
    var address = new Address();  
    exports("address",function(){  
        address.provinces();  
    });  
});

ajax ->PHP 后台

/**
       * 地区三级联动
       */
      public function areaAction(){
          $code  = $this->sys_getparam('code' ) ; // 获取省市区数据
          $type =  $this->sys_getparam('type' ) ;
          
          if($type==1){ //省
              $sql = "
            SELECT id AS code,province AS name FROM a_province ;
          " ;
          }
          if($type==2){ //市
              $sql = "
            SELECT id AS code,city AS name FROM a_city  WHERE province_id= $code ;
          " ;
          }
          if($type==3){ //区
              $sql = "
            SELECT id AS code,district AS name FROM a_district  WHERE city_id= $code ;
          " ;
          }
          $areaData = app::dbload($sql,'all');
          echo json_encode($areaData)  ;
      }

效果:

shao_keke

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
layui的三级联动

&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="renderer" content="webkit"&gt; &amp
复制链接

扫一扫