精华内容
下载资源
问答
  • 主要为大家详细介绍了layui实现下拉框三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 今天小编就为大家分享一篇layui固定下拉框的显示条数(有滚动条)的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • jQuery基于Layui搜索下拉框代码是一款支持中文跟首字母搜索下拉提示列表代码。
  • 今天小编就为大家分享一篇layui下拉框、按钮状态、时间赋初始值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • div class="layui-inline"> <label class="layui-form-label">测试内容</label> <div class="layui-input-inline"> <select name="projectName" id="contentId" lay-filter=...
    <div class="layui-inline">
    			    <label class="layui-form-label">测试内容</label>
    			    <div class="layui-input-inline">
    			      <select name="contentName"  id="contentId" lay-filter="contentId" lay-verify="required"> 
    			       <option value="">请选择</option>
    			      </select>
    			  </div>
    			</div>
    

    方法一:

    function content(){
    			var available = 1;
    			$.get("/load/contentId?available="+available,function(objs){
    				
    				var types = objs.data;
    				var contentIdHtml= $("#contentId").html("");
    				contentIdHtml.append('<option value>请选择</option>'); 
    				$.each(types,function(index,item){
    					contentIdHtml.append("<option value="+item.contentName+">"+item.contentName+"</option>");
    				});
    				$("#contentId").val(contentNameAdd); //设置选中的值 contentNameAdd此处做全局变量
    				form.render("select");
    
    			}); 
    		};
    

    方法二:

    var contentId=$("#contentId");
       							var contentIdHtml="<option value='0'>请选择直属领导</option>";
       							$.each(users,function(index,item){
       								contentIdHtml+="<option value='"+item.id+"'>"+item.name+"</option>";
       							});
       							contentId.html(contentIdHtml);
       							//选中一个
       							$("#contentId").val(contentNameAdd); //设置选中的值 contentNameAdd此处做全局变量
       							//重新渲染
       							form.render("select");
    
    展开全文
  • layui下拉框动态赋值

    万次阅读 2020-02-01 13:42:00
    第一步:先把layui官方给的模板粘到自己的前端 注:下面的代码是我直接从layui官网粘过来的 <div class="layui-form-item"> <label class="layui-form-label">选择框</label> <div class=...

    代码说明部分

    第一步:先把layui官方给的模板粘到自己的前端
    注:下面的代码是我直接从layui官网粘过来的

    <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
          <select name="city" lay-verify="required">
            <option value=""></option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">杭州</option>
          </select>
        </div>
    </div>
    

    第二步:再把上面的代码删除到最简的样式 如下代码片段所示 中间内容根据自己的修改

    <div class="layui-form-item">
    	<label class="layui-form-label">所属院系</label>
    		<div class="layui-input-block">
               <select name="dp" id="dp" lay-verify="required" lay-filter="xmFilter">
                   <option value=""></option>
               </select>
            </div>
    </div>
    

    第三步:编写js文件,实现动态赋值

    <script>
           //下拉框可能会用到 New option
           //这个里面的参数说明 第一个是显示的文本,第二个是value值 
           //例如:new Option(item.xm, item.id)第一个参数是下拉列表中显示的值  第二个参数是选中传递给后台的值
            layui.use(['form', 'upload', 'layer'],function(){
                var form = layui.form;
                $.ajax({
                    url: 'department_json.php',
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        console.log(data);//下面会提到这个data是什么值
                        //使用循环遍历,给下拉列表赋值
                        $.each(data.data, function (index, value) {
                            // console.log(value.department_id);
                            $('#dp').append(new Option(value.department_name,value.department_id));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");//重新渲染 固定写法
                    }
                })
            });
    </script>
    

    可能很多人会问,这个数据从什么地方来,这就要看你们后台给你们什么样的数据了
    我的后台数据是这个样子的

    {"code":0,"msg":"","count":4,"data":[{"id":"1","department_id":"10001","department_name":"信息工程学院"},{"id":"2","department_id":"10002","department_name":"人文学院"},{"id":"3","department_id":"10003","department_name":"电子工程学院"},{"id":"6","department_id":"1111222","department_name":"11111222"}]}
    

    格式化后的数据格式为

    {
      "code": 0,
      "msg": "",
      "count": 4,
      "data": [
        {
          "id": "1",
          "department_id": "10001",
          "department_name": "信息工程学院"
        },
        {
          "id": "2",
          "department_id": "10002",
          "department_name": "人文学院"
        },
        {
          "id": "3",
          "department_id": "10003",
          "department_name": "电子工程学院"
        },
        {
          "id": "6",
          "department_id": "1111222",
          "department_name": "11111222"
        }
      ]
    }
    

    其实这个data就是我们响应回来的json数据
    在这里插入图片描述
    但是我的数据是在data中
    在这里插入图片描述
    所以我会在这里用data.data 去循环我自己data中的值

    $.each(data.data, function (index, value) {
       	// console.log(value.department_id);
        $('#dp').append(new Option(value.department_name,value.department_id));// 下拉菜单里添加元素
    });
    

    这个value是什么值呢? 我们可以打印出来看下
    在这里插入图片描述
    我们可以清晰的看见就是通过each循环 打印出了每一行的值 再取我们要的值就可以了 例如我们要id 就可以直接写成value.id

    演示结果部分在这里插入图片描述

    展开全文
  • 今天小编就为大家分享一篇layui下拉框获取下拉值(select)的例子,具有好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • div class="layui-input-inline"> <select name="modules" id="nameselect" lay-search="" lay-verify="required"> </select> </div> js代码 function LayuiCreateSelect(selectId, url,...

    前台页

    HTML样式

    <div class="layui-input-inline">
                <select name="modules" id="nameselect" lay-search="" lay-verify="required">
                   
                </select>
     </div>
    

    js代码

    function LayuiCreateSelect(selectId, url, value) {//value  设置加载完成时所选定的值
            //数据请求
            $.post(url, function (optionList) {
                //判断id是否有"#"
                if (selectId.indexOf('#') != 0) {
                    selectId = '#' + selectId;
                }
                $(selectId).empty();//清空该元素
                //创建option
                for (var k in optionList) {
                    $(selectId).append("<option value='" + optionList[k].Id + "'>" + optionList[k].Name + "</option>");
                }
                //使用layui下拉框的必要代码
                layui.use('form', function () {
                    var form = layui.form;
                    //设置选中值
                    if (value != undefined && value != null && value != '') {
                        $(selectId).val(value);
                    }
                    form.render();//重载表单
                });
            });
    

    方法调用

    LayuiCreateSelect("nameselect", "/Component/SearchList");
    

    后台页

    首先创建一个数据模型

    public class Option
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public Option(int id,string name)
            {
                Id = id;
                Name = name;
            }
        }
    
    public ActionResult SearchList()
            {
                //从数据库查询语句
                var componentlist = baseBLL.GetEntities(x => x.IsDelete != 1);
                Option opt = new Option(0, "请选择");
                List<Option> optionList = new List<Option>();
                optionList.Add(opt);
                foreach(var item in componentlist)
                {
                    Option option = new Option(item.ComponentID, item.ComponentName);
                    optionList.Add(option);
                }
                return Json(optionList, JsonRequestBehavior.AllowGet);
            }
    
    展开全文
  • 关于layui监听下拉框值得变化,大家都知道官方文档给我们提供了一个方法 form.on('select(demo)',function(data){ console.log(data.value)//打印当前select选中的值 }) 按照我之前的理解,监听下拉框值得变化,...
  • 今天小编就为大家分享一篇Layui动态生成select下拉选择框不显示的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui 第一个下拉框动态获取数据,选取第一个下拉框数据后,下一个下拉框根据前面选择的数据 后台动态 联动填充数据 HTML代码如下 <form class="layui-form" action=""> <div class="layui-input-inline ...

    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");
                }
            });
        })
    
    
    })
    
    展开全文
  • layui渲染下拉框,设置下拉框,设置验证 <div class="layui-form-item"> <label for="department_id" class="layui-form-label"> <span class="x-red">*</span>部门 </label&...
  • 今天小编就为大家分享一篇Layui带搜索的下拉框的使用以及动态数据绑定方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • jQuery基于Layui下拉框搜索提示列表代码,支持中文跟拼音首字母进行搜索匹配在下拉框列表显示。
  • 【经典】layui下拉框分页,大数据解决方案-附件资源
  • layui多选下拉框

    2021-07-23 11:00:25
    加上下面代码即可解决 在layui注册下拉框 layui.use(['upload', 'element', 'form', 'layer', 'laydate', "multiSelect"], function () { layui.multiSelect.render('select','selectTest'); }); js文件我就不分享了...
  • 一、layui.use 1、LayUI的官方使用文档:https://www.layui.com/doc/ 2、layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载; 3、layui.use就是一种加载模块的方式。 如下代码: //...
  • Layui动态生成下拉框

    千次阅读 2020-04-26 15:11:30
    在写后台管理页面的时候,经常需要有下拉框搜索功能,比如说数据库有一张类型表,那么这个时候的下拉框里选项是需要根据表的数据一致的,当用户修改了数据库数据的时候,下拉框的选项也需要动态的改变。 Layui框架...
  • layui-input-block&amp;amp;quot; style=&amp;amp;quot;width:190px&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;select name=&amp;amp;quot;&amp;amp;quot; id=&amp;amp;quot...
  • layui下拉框的样式,具体如下代码: <div class="form-group form-row"> <label class="col-form-label col-lg-4">状态</label> <div class="col-lg-8"> <select class="layui-inpu
  • 最近项目中用到了Layui 然后遇到好多好多好多好多的问题 下拉框回显这个问题已经遇到了第二次了 这里记录一下 方便以后使用 原理就是循环整个下拉列表 找到对应的那个 然后加上select属性 $("#idName").each...
  • 语句给下拉框赋初值,赋值之后,下拉框里是显示已经选中的状态了,可页面显示却对应不上,正常的情况下,应该显示‘未知’,可现在却显示默认值,网上搜着用 $(...
  • layui的select 若已经给了选项的数据,它还会动态生成另外一段代码: <dl class="layui-anim layui-anim-upbit"/> 想自己添加动态的数据,则我们也需要添加: <dl class="layui-anim layui-anim-upbit"/&...
  • // 重置支付状态 $("select#paymentStatus").val(""); //重新渲染下拉框 layui.use('form', function () { var form = layui.form; form.render("select");...重置下拉框后,一定要重新渲染下拉框
  • LayUI清空下拉框的值

    2021-02-22 13:37:55
    //监听事件 form.on('select(id)',function(elem){ //执行清空 $("#id").empty(); form.render("select"); });
  • layui 树状下拉框

    2020-07-31 11:50:40
    准备 先获取treeSelect.js文件 原js文件不提供自定义解析jsondata的功能,需要自己在源码里面修改。...2、layui.use加上“treeSelect”, 3、var treeSelect = layui.treeSelect 4、 function XMTr
  • LayUI select下拉框联动

    2021-07-13 12:32:54
    LayUI 下拉框联动,选择一个其他根据对应关系自动选择。 HTML代码如下: <div class='layui-fluid'> <div class='layui-card'> <form class="layui-form layui-card-header layuiadmin-card-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,258
精华内容 1,303
关键字:

layui动态下拉框