精华内容
下载资源
问答
  • layui下拉框select动态获取后台数据,下拉框二级联动效果,压缩包里打开a.html即可查看。
  • 今天小编就为大家分享一篇解决layui级联动下拉框更新时回显的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了C# MVC 如何使用LayUI实现下拉框二级联动,文中示例代码非常详细,供大家参考和学习,感兴趣的朋友可以了解下
  • 本篇文章主要介绍了jquery基于layui实现二级联动下拉选择(省份城市选择),具有一定的实用价值,需要的朋友可以参考下
  • 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");
                }
            });
        })
    
    
    })
    
    展开全文
  • 刷新下拉框 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");
                    }
                })
            });
    
    展开全文
  • 基于layui开发的省市区三级联动下拉框,可以直接使用,还是很方便的
  • C# MVC LayUI实现下拉框二级联动

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

    一、layui.use

    1、LayUI的官方文档:LayUI官方开始使用文档
    2、layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载;
    3、layui.use就是一种加载模块的方式。
    如下代码:

    	//LayUI渲染以及启动模块
    	  layui.use(['form', 'layedit', 'laydate'], function () {
                    var form = layui.form,//获取form模块
                    layer = layui.layer,//获取layer模块
                    layedit = layui.layedit,//获取layedit模块
                    laydate = layui.laydate,//获取laydate模块
                    $ = layui.$;
    

    二、创建控制器或在已有的控制器中添加在操作方法

    		/// <summary>
            /// 获取部门信息
            /// </summary>
            [HttpPost]
            public JsonResult GetDeplist()
            {
                using (ERPEntities db = new ERPEntities())
                {
                    db.Configuration.ProxyCreationEnabled = false;//关闭EF的默认加载
                    var Deplist = db.dep.ToList();
                    //将数据Json化并传到前台视图
                    return Json(new { data = Deplist }, JsonRequestBehavior.AllowGet);
                }
            }
    
    		/// <summary>
             /// 通过部门ID来获取角色
             /// </summary>
             /// <param name="dep_id">部门ID</param>
             /// <returns></returns>
             [HttpPost]
            public JsonResult GetRolelist(int dep_id)
            {
                using (ERPEntities db = new ERPEntities())
                {
                    db.Configuration.ProxyCreationEnabled = false;//关闭EF的默认加载
                    var Roles = db.role.Where(r => r.dep_id == dep_id).ToList();//通过部门ID 查找到对应的角色
                    List<SelectListItem> item = new List<SelectListItem>();
                    foreach (var Role in Roles)
                    {
                        item.Add(new SelectListItem { Text = Role.name, Value = Role.role_id.ToString() });
                    }
                    //将数据Json化并传到前台视图
                    return Json(new { data = item }, JsonRequestBehavior.AllowGet);
    
                }
            }
    
    

    三、在需要显示多级联动的视图页面写上如下代码

    <!--使用二级联动需要用LayUI的“layui-form”属性,不然会联动失效-->  
        <!--部门角色二级联动-->
        <div class="layui-form-item">
            <label class="layui-form-label">部门:</label>
            <div class="layui-input-inline">
                <select name="Dep" lay-filter="parentDep" id="Dep">
                    <option value="">——请选择部门——</option>
                </select>
            </div>
            <label class="layui-form-label">角色:</label>
            <div class="layui-input-inline">
                <select name="Role" id="Role" lay-filter="RoleInfo">
                    <option value="">——请选择角色——</option>
                </select>
            </div>
        </div>
    

    四、JS部分的代码

    注意: 有的伙伴可能需要先引入jquery;根据自己的需求以及实际情况进行引入

    <script src="~/Scripts/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        	// 封装获取角色的函数:通过部门ID得到角色
        	function getRoles(data) {
            	//获取到部门框中的Value部门的ID
            	var dep_id = {
            	    dep_id: data.value
            	}
             //再利用ajax将数据传到后端,来获取到对应下拉框选项而出现的值
            //检查项目添加到下拉框中
            $.ajax({
                url: "@Url.Action("GetRolelist")",
                dataType: 'json',
                data: JSON.stringify(dep_id),//将参数Json化,在传递给后台控制器
                contentType: "application/json",
                type: 'post',
                success: function (result) {
                    console.info(result.data);
                    $("#Role").empty();//清空下拉框的值
                    $.each(result.data, function (index, item) {
                        $('#Role').append(new Option(item.Text, item.Value));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");//重新渲染 固定写法
                }
            });
        };
        //LayUI渲染以及启动模块
    	  layui.use(['form', 'layedit', 'laydate'], function () {
                    var form = layui.form,//获取form模块
                    layer = layui.layer,//获取layer模块
                    layedit = layui.layedit,//获取layedit模块
                    laydate = layui.laydate,//获取laydate模块
                    $ = layui.$;
                    // 得到部门
                    $.ajax({
                        url: "@Url.Action("GetDeplist")",
                        dataType: 'json',
                        type: 'post',
                        success: function (result) {
                                $.each(result.data, function (index, item) {
                                	$('#Dep').append(new Option(item.name, item.dep_id));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");//重新渲染 固定写法
                        }
                    });
                    // 联动
                    form.on('select(parentDep)', function (data) {
    					//监听到了下拉框选择的选项,传递过来
                        //console.info(data);
                        getRoles(data);
                    });
    		});
    </script>
    

    1.select的chage监听事件使用:

    form.on(‘select(myselect)’, function(data){}) 其中myselect是select的 lay-filter属性值

    2.数据异步加载到select的option中之后,点击该select会发现layui的选中效果不起作用,需要使用
    form.render(‘select’);重新渲染一次,就可以正常使用。

    联动效果如下:

    二级联动

    展开全文
  • layui输入下拉框使用select二级联动

    千次阅读 2019-12-05 11:31:33
    在这里插入代码片 引入layui 脚本 ```<script src="<c:url value='/static/topayProfit/layui/layui.js'/>"></script> <script src="<c:url value='/static/topayProfit/layui/layui.all.js...
    在这里插入代码片  引入layui 脚本
    ```<script src="<c:url value='/static/topayProfit/layui/layui.js'/>"></script>
    <script src="<c:url value='/static/topayProfit/layui/layui.all.js'/>"></script>
    	<link rel="stylesheet" href="<c:url value='/static/topayProfit/layui/css/layui.css' />" />	
    
    第二布
    <div class="layui-inline layui-form" style="width:96%">  //  lclass= ayui-form 必须加入这个class
    	  <div class="layui-input-inline" style="width:94%">
    		<select   id="branchBank"  name="branchBank" lay-verify="required" lay-search="" lay-filter="branchBank">
    		  <option value="">直接选择或搜索选择</option>        
    	   
    		</select>
    	  </div>
    	</div>
    
    
    第三部 引入 
    
    <script>
    //页*面加载时重新加载专用js脚本* 
    //*页面加载时重新加载一下输入下拉框*  
    	layui.use('form', function (){
    		var form = layui.form; 
    		
    		form.render();
    	 });  
    layui.use(['form', 'layedit', 'laydate'], function(){
      var form = layui.form
      ,layer = layui.layer
      ,layedit = layui.layedit
      ,laydate = layui.laydate;
      
      //日期
      laydate.render({
        elem: '#date'
      });
      laydate.render({
        elem: '#date1'
      });
      
      //创建一个编辑器
      var editIndex = layedit.build('LAY_demo_editor');
     
      //自定义验证规则
      form.verify({
        title: function(value){
          if(value.length < 5){
            return '标题至少得5个字符啊';
          }
        }
        ,pass: [
          /^[\S]{6,12}$/
          ,'密码必须6到12位,且不能出现空格'
        ]
        ,content: function(value){
          layedit.sync(editIndex);
        }
      });
      
      //监听指定开关
      form.on('switch(switchTest)', function(data){
        layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
          offset: '6px'
        });
        layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)
      });
      
      //监听提交
      form.on('submit(demo1)', function(data){
        layer.alert(JSON.stringify(data.field), {
          title: '最终的提交信息'
        })
        return false;
      });
     
      //表单赋值
      layui.$('#LAY-component-form-setval').on('click', function(){
        form.val('example', {
          "username": "贤心" // "name": "value"
          ,"password": "123456"
          ,"interest": 1
          ,"like[write]": true //复选框选中状态
          ,"close": true //开关状态
          ,"sex": "女"
          ,"desc": "我爱 layui"
        });
      });
      
      //表单取值
      layui.$('#LAY-component-form-getval').on('click', function(){
        var data = form.val('example');
        alert(JSON.stringify(data));
      });
      
    });
    </script>
    
    
    第四部 
    function getbranchBank(){
    	var provVal = $("#bankProvinceName").val().trim();  //参数
    	var city = $("#bankCityName").val().trim();  //参数
    	var compAcctBank = $("#compAcctBank").val(); //参数
    	
    	var channelCode ="";
    	$.post(window.Constants.ContextPath +"/common/info/bankCnapsInfo",
    	{
    		"provinceId": provVal,
    		"cityCode":   city,
    		"bankCode":   compAcctBank,
    		"channelCode":channelCode
    	},
    	function(data){
    		if(data.result=="SUCCESS"){
    			var branchBankList = data.branchBankList;
    			
    			 $("#branchBank").html("");	
    			$("#branchBank").append('<option value="">直接选择或搜索选择</option>');
       			for ( var branchBank in branchBankList) {
       				$("#branchBank").append(
       						"<option value='"+ branchBankList[branchBank].branchBankCode +"'>"
       								+ branchBankList[branchBank].bankName + "</option>"); 
       			}
       			
       		 	layui.use('form', function (){
       				var form = layui.form; 
       				//重新加载form表单
       				form.render();
       			 });  	
    		}
    		
    	},'json'
    	);	
    	}
    
    	完成 
    
    
    
    
    展开全文
  • 如表格中所示,我们要实现的是,当我们选中水果的时候,二级下拉框弹出苹果、橘子、香蕉这三个选项,蔬菜,肉类也同理 数据库 首先是数据库(以MySQL为例),我们新建一个数据库 tp5,在该数据库中再新建一张表 ...
  • layui下拉框联动查询效果

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

    千次阅读 2021-04-18 02:14:42
      二级下拉框:每个科室的床号 效果: 下拉框html代码: <div class="layui-form-item"> <label class="layui-form-label">所在科室</label> <div class="layui-input-inline"> &
  • 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-12-01 16:57:26
    一、layui.use 这里layui的官方文档:https://www.layui.com/doc/ layui这个框架采用的是经典模块化 layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载。 layui.use就是一种加载模块...
  • layui下拉框多级联动的实现

    千次阅读 2019-07-09 15:22:47
    下拉框多级联动的实现
  • layui select下拉二级联动

    千次阅读 2021-01-21 16:20:59
    div class="layui-form-item layui-row layui-col-space15"> <label class="layui-col-xs3 relative"> <span class="color-green">报考学校</span> <select class="layui-select" ...
  • 关于layui框架下拉框省市两级联动

    千次阅读 2018-11-20 16:49:50
    写在前面 废话不多说,直接进入正题 ...第步,在使用下拉框之前,需要在JS声明form模板 layui.use('form', function(){ var form = layui.form; 第三步,创建两个下拉框 &amp;lt;label cla...
  • layui中实现二级联动,有的时候二级联动不出来 给大家介绍两种方法 <tr> <td class="tds" >企业名称:</td> <td> <select name="enter_id" lay-filter="father_enter" > <...
  • layui的插件效果,优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 196
精华内容 78
关键字:

layui下拉框二级联动