精华内容
下载资源
问答
  • layui下拉框select动态获取后台数据,下拉框二级联动效果,压缩包里打开a.html即可查看。
  • layui二级联动 layui 第一个下拉框动态获取数据,选取第一个下拉框数据后,下一个下拉框根据前面选择的数据 后台动态 联动填充数据 HTML代码如下 <form class="layui-form" action=""> <div class="layui-...

    layui二级联动

    layui 第一个下拉框动态获取数据,选取第一个下拉框数据后,下一个下拉框根据前面选择的数据 后台动态 联动填充数据

    HTML代码如下

    <form class="layui-form" action="">
        <div class="layui-input-inline from-ses" style="width: 140px;">
          <select name="quiz1"id="quiz1"lay-filter="quiz1">
            <option value="">一级分类</option>
            <option value="灾害数据" >灾害数据</option>
            <option value="新能源">新能源</option>
          </select>
        </div>
        <div class="layui-input-inline from-ses">
          <select name="quiz2" id="quiz2">
            <option value="">二级分类</option>
            <option value="电网覆冰监测">电网覆冰监测</option>
            <option value="电网覆冰预测预警" >电网覆冰预测预警</option>
            <option value="电网舞动监测">电网舞动监测</option>
            <option value="电网舞动预测预警">电网舞动预测预警</option>
            <option value="电网山火检测">电网山火检测</option>
            <option value="电网山火预测预警">电网山火预测预警</option>
          </select>
        </div>
     </form>
    

    js代码如下

    layui.use('form', function(){
      var form = layui.form;
      $.ajax({
          url: "json/menu.json",
          type: "post",
          dataType: "json",
          success: function(datas) {
              datas=datas.menu;
              if(datas.length>0){
                  $("#quiz1").empty();
                  $("#quiz1").append("<option value=''>一级分类</option>");
                  for(var i=0;i<datas.length;i++){
                      var item=datas[i];
                      $("#quiz1").append("<option value="+item+">"+item+"</option>");
                  }
              }else {
                  $("#quiz1").empty();
                  $("#quiz1").append("<option value=''>一级分类</option>");
              }
              form.render("select");
          }
      });
        form.on('select(quiz1)', function(data){
            var value = data.value
            $.ajax({
                url: "json/menu2.json?va="+value,
                type: "post",
                dataType: "json",
                success: function(datas) {
                    datas=datas.menu;
                    if(datas.length>0){
                        $("#quiz2").empty();
                        $("#quiz2").append("<option value=''>更改后的select</option>");
                        for(var i=0;i<datas.length;i++){
                            var item=datas[i];
                            $("#quiz2").append("<option value="+item+">"+item+"</option>");
                        }
                    }else {
                        $("#quiz2").empty();
                        $("#quiz2").append("<option value=''>a</option>");
                    }
                    form.render("select");
                }
            });
        })
    
    
    })
    
    展开全文
  • { "status": 200, "message": "result", "data": [ { "code": "01", "name": "政治品德", "category": "品德" }, { "code": "02", "name": "工作作风", "category": "品德" }, { ...}
  • 刷新下拉框 form.render("select"); } }); //监听第一个下拉框的变化 form.on('select(required)',function(data){ console.log(data); $.ajax({ url:"/build?method=select", type:"GET", data:{ data:data....
     $.ajax({
                url:"/build?method=sel",
                type:"GET",
                success:function (res) {
                    console.log(res);
                    //遍历后端数据
                    $.each(res,function(index,value){
                        $("#cname").append("<option value="+value+">"+value+"</option>");
                    });
                    刷新下拉框
                    form.render("select");
                }
            });
    		//监听第一个下拉框的变化
            form.on('select(required)',function(data){
                console.log(data);
                $.ajax({
                    url:"/build?method=select",
                    type:"GET",
                    data:{
                        data:data.value
                    },
                    success:function (res) {
                        $("#buildname").empty();
                        $.each(res,function(index,value){
                            $("#buildname").append("<option value="+value+">"+value+"</option>");
                            console.log(res[index]);
                        });
                        form.render("select");
                    }
                })
            });
    
    展开全文
  • 主要介绍了C# MVC 如何使用LayUI实现下拉框二级联动,文中示例代码非常详细,供大家参考和学习,感兴趣的朋友可以了解下
  • layui下拉框联动查询效果

    千次阅读 2020-04-13 23:42:32
    之前有这么一个功能,需要设计一个联动效果来联动几个选择框,假设这里是院系-专业-班级,又或者省-市-县,又或者一级部门-二级部门等等的,一个下拉框选择联动另一个下拉框,其实都是异曲同工之妙。 解决方案 *. ...

    前言

    之前有这么一个功能,需要设计一个联动效果来联动几个选择框,假设这里是院系-专业-班级,又或者省-市-县,又或者一级部门-二级部门等等的,一个下拉框选择联动另一个下拉框,其实都是异曲同工之妙。
    在这里插入图片描述

    解决方案

    *. 由于系统代码为保密,所以这里只摘录部分代码并对原有的变量等做了处理

    1. HTML部分,两个select框。
    <label class="layui-form-label">一级部门</label>
    <select id="departmentFirstLevel" name="departmentFirstLevel">
       <option value=""></option>
    </select>
    
    <label class="layui-form-label">二级部门</label>
    <select id="departmentSecondaryLevel" name="departmentSecondaryLevel">
       <option value=""></option>
    </select>
    
    1. 初始化一级部门
    function initDepartmentFirstLevel(){
       $.ajax({
           type: 'POST',
           url: "${request.contextPath}/departmentFirstLevel/list",
           data:{"searchParams":"","page":"1","limit":"99"},
           success: function (responseData) {
               if (responseData.code === 200 || responseData.code === 0) {
                   var length = responseData.data.length;
                   console.log("一级部门数量:"+length);
                   $("#departmentFirstLevel").empty();
                   $("#departmentFirstLevel").append('<option value=""></option>');
                   for(var i = 0; i < length; i++) {
                       //添加option元素
                       $("#departmentFirstLevel").append("<option value='" + responseData.data[i].departmentId + "'>" + responseData.data[i].departmentName + "</option>");
                   }
                   //如果你是用freemaker,可以用该方法选中变量
                   $("#departmentFirstLevel").val("${(user.departmentFirstLevel)!!}");
                   //渲染select
                   form.render('select');
               } else {
                   layer.msg("加载列表失败");
               }
           }
       });
    }
    //直接初始化一级部门
    initDepartmentFirstLevel();
    
    1. 设置一级部门联动二级部门效果。
    form.on('select(departmentFirstLevel)', function(data){
        //根据一级部门联动二级部门
        initDepartmentSecondaryLevel();
    });
    
    1. 二级部门联动逻辑,核心就是传入选择的i一级部门id,传给Controller方法查询并列出对应的二级部门,产生联动效果。
    function initDepartmentSecondaryLevel(){
        $.ajax({
            type: 'POST',
            url: "${request.contextPath}/departmentSecondaryLevel/list",
            data:{"searchParams":"{'departmentFirstLevel':'"+$("#departmentFirstLevel").val()+"'}","page":"1","limit":"99"},
            success: function (responseData) {
                if (responseData.code === 200 || responseData.code === 0) {
                    var length = responseData.data.length;
                    console.log("二级部门数量:"+length);
                    $("#departmentSecondaryLevel").empty();
                    $("#departmentSecondaryLevel").append('<option value=""></option>');
                    for(var i = 0; i < length; i++) {
                        //添加option元素
                        $("#departmentSecondaryLevel").append("<option value='" + responseData.data[i].departmentId + "'>" + responseData.data[i].departmentName + "</option>");
                    }
                    //如果你是freemarker,可以用该方法设置选中效果
                    $("#departmentSecondaryLevel").val("${(user.departmentSecondaryLevel)!!}");
                    //渲染select
                    form.render('select');
                } else {
                    layer.msg("加载列表失败");
                }
            }
        });
    }
    //如果二级部门数量较少,可以考虑直接初始化(当然, 建议不要)。
    //initDepartmentSecondaryLevel()
    
    展开全文
  • 文章目录前言一、Android实现下拉框二级联动二、Layui实现省市县三级联动 前言 Android实现下拉框二级联动和前端框架Layui实现省市联动源码的比对 提示:以下是本篇文章正文内容,下面案例可供参考 一、Android...


    前言

    Android实现下拉框二级联动和前端框架Layui实现省市联动源码


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、Android实现下拉框二级联动

    仅取关键源码如下:

    res/values/string.xml 中增加

      <string-array name="region">
            <item>全省</item>
            <item>武汉</item>
            <item>黄石</item>
            <item>十堰</item>
            <item>襄阳</item>
            <item>鄂州</item>
            <item>荆州</item>
            <item>荆门</item>
        </string-array>
    
    public class CustomerManagementActivity extends AppCompatActivity {
        private Context context;
      
     
        private Spinner sp_region;
        private Spinner sp_department;
        private String[] rs_region ;//地区数据
        private ArrayAdapter<String> adapterDepartment;
        private String[][] department = new String[][]{
                {"办公室","行政保卫部""客户服务部","人力资源部","市场拓展部"},
                {"副总经理","政企客户部","办公室","销售服务部"},
                {"综合服务支撑中心","新兴业务中心","销售服务部"},
                {"网络部","办公室","监控中心"},
                {"移动销售部","销售服务部","销售部","城区分局"},
                {"政企客户部","移动销售部","办公室财务","移动业务部"},
                {"销售服务部","财务","移动部","政企客户部","客服中心员工"}
        };
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            this.requestWindowFeature(Window.FEATURE_NO_TITLE);
            setContentView(R.layout.activity_customer_management);
            initView();
            setClickListeners();
            setRegionSpListeners();
        }
    
    
        private void initView() {
            context =this;
            titleBar = (CommonTitleBar) findViewById(R.id.titlebar);   
            sp_region = (Spinner)findViewById(R.id.sp_region);
            Resources res = getResources();
            rs_region = res.getStringArray(R.array.region);
            sp_department = (Spinner)findViewById(R.id.sp_department);
        }
    
       
        private void setRegionSpListeners() {
    
            sp_region.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
                @Override
                public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                    int pos =sp_region.getSelectedItemPosition();
                    //Log.d("p",pos+""+department[pos][0]);
                    adapterDepartment = new ArrayAdapter<String>(context,android.R.layout.simple_spinner_item,department[pos]);
                    sp_department.setAdapter(adapterDepartment);
                }
                @Override
                public void onNothingSelected(AdapterView<?> parent) {
    
                }
            });
        }
    }
    

    二、Layui实现省市县三级联动

    官网:https://github.com/sentsin/layui/
    https://gitee.com/sentsin/layui

    代码如下

    layui.css layui.js layarea模块请先在官网下载

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>layarea</title>
        <link rel="stylesheet" href="./layui/css/layui.css">
    </head>
    
    <body>
        <div class="layui-form">
    
            <div class="layui-form-item" id="area-picker">
                <div class="layui-form-label">网点地址</div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="province" class="province-selector">
                        <option value="">--选择省--</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="city" class="city-selector">
                        <option value="">--选择市--</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="county" class="county-selector">
                        <option value="">--选择区--</option>
                    </select>
                </div>
            </div>
    
        </div>
        <script src="./layui/layui.js"></script>
        <script>
            //配置插件目录
            layui.config({
                base: './mods/'
                , version: '1.0'
            });
            //一般直接写在一个js文件中
            layui.use(['layer', 'form', 'layarea'], function () {
                var layer = layui.layer
                    , form = layui.form
                    , layarea = layui.layarea;
    
                let obj1 = layarea.render({
                    elem: '#area-picker',
                    change: function (res) {
                        //选择结果
                        console.log(res);
                    }
                });
            });
        </script>
    </body>
    
    </html>
    

    结果如下:
    在这里插入图片描述


    展开全文
  • layUI下拉框联动

    千次阅读 2018-08-01 17:50:16
    //一 &lt;div class="layui-input-block"&gt; &lt;select name="pgId" id="pgId" lay-verify="matTypeId" lay-filter="pgIdsel"&gt; &...
  • layui 下拉框 联动多级 ajax取值方法

    千次阅读 2018-10-20 21:03:59
    layui 下拉框 联动多级 ajax取值方法   &lt;div class="layui-form-item" id="app_url" style="display: none;"&gt; &lt;div class="layui-inline"&...
  • layui 下拉框展示错误

    2019-04-22 15:45:40
    先展示错误的结果,第一个是我想要做到的效果,第张图片,是实际中出现的问题。 怎么会出现这样的问题?一的下拉项怎么没了? 我去,我能说些什么,这个是因为没有请选择那个最初的选择项。没想到吧。是不是...
  • C# MVC LayUI实现下拉框二级联动

    千次阅读 2020-06-20 11:42:32
    一、layui.use 1、LayUI的官方文档:LayUI官方开始使用文档 ; 2、layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载; 3、layui.use就是一种加载模块的方式。 如下代码: //LayUI...
  • layui下拉框获取值与数据回显

    千次阅读 2019-12-17 21:03:21
    这两天做layui的框架项目碰到了下拉框动态赋值与回显,给大家分享一下 新增: <div class="layuimini-container"> <div class="layuimini-main"> <div class="layui-btn-group"> <button id...
  • formSelects-v4 layui下拉框多选方案

    千次阅读 2019-08-06 09:49:27
    formSelects-v4.js 基于Layui的多选解决方案 1、闲谈杂趣 v3传送门v3文档 其实思考了很久, 还是放弃了v3, 因为开发v3的时候很粗暴, 按照编程角度来看就是硬撸, 也怪自己实力有限, 所以反思了一下, 尝试着继续前行....
  • layui下拉框多级联动的实现

    千次阅读 2019-07-09 15:22:47
    下拉框多级联动的实现
  • 首先就是加入render进行渲染 如果还是不对 一定要注意layui是不是放在一个文件里

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 310
精华内容 124
关键字:

layui下拉框二级