精华内容
下载资源
问答
  • layui下拉框文本值
    2021-10-08 16:15:38
    $("#id option:selected").text();

    更多相关内容
  • 今天小编就为大家分享一篇解决JavaScript layui 下拉框不显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui下拉框获取下拉值(select)的例子,具有好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 关于layui监听下拉框值得变化,大家都知道官方文档给我们提供了一个方法 form.on('select(demo)',function(data){ console.log(data.value)//打印当前select选中的值 }) 按照我之前的理解,监听下拉框值得变化,...
  • layui下拉框select动态获取后台数据,下拉框二级联动效果,压缩包里打开a.html即可查看。
  • jQuery基于Layui下拉框搜索提示列表代码,支持中文跟拼音首字母进行搜索匹配在下拉框列表显示。
  • 【经典】layui下拉框分页,大数据解决方案-附件资源
  • 首先layui是什么? ... (官方解释!... 这是layui下拉框绑定的特别之处。 别的下拉框绑定是不需要这句的代码的。 比如:Bootstrap框架。 但是layul框架没有这句代码layul的下拉框是绑定不上数据的。

    首先layui是什么?

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

    (官方解释!!!)

    下拉框绑定数据:

    Html代码:

    上图是使用layui做出来的下拉框。

    js代码:

    Form.render(); 这是layui下拉框绑定的特别之处。

    别的下拉框绑定是不需要这句的代码的。

    比如:Bootstrap框架。

    但是layul框架没有这句代码layul的下拉框是绑定不上数据的。

    控制器代码:

    下拉框回填数据:

     

    layui的下拉框回填与绑定一样要使用form.render() 加载表格。

    layui的下拉框回填与别的框架还有一点不同的。

    就是要写在  下拉框绑定请求成功时调用回调函数中(如上图所示)。

    下面是一个layui下拉框的绑定和回填的一个封装函数。

    function dropDownbox(selectId, url, form, value) {

        //下拉框绑定

        $.post(url, function (jsonData) {

            //当用户传过来的ID值不带#号时,为标量拼接上#号

            if (selectId.indexOf('#') != 0) {

                selectId = '#' + selectId;

            }       

            //创建option

            for (var k in jsonData) {

                $(selectId).append('<option value="' + jsonData[k].value + '">' + jsonData[k].text + '</option>');

            }      

            //设置选中值

            if (value != undefined && value != null && value != '') {

                $(selectId).val(value);

            }

            //重新加载

            form.render();

        })

    }

    ////dropDownbox(selectId, url, form, value)

    selectId是id;

    url是控制器路径;

    form是form.render();

    value是下拉框的回填值(可空);

    展开全文
  • 奇怪的LayUI下拉框

    2021-12-24 23:00:27
    今天要做一个二级联动的下拉框,看了LayUI的文档,感觉应该很容易。  与联动下拉框相关的html文件主要内容: <div class="layui-form-item"> <label class="layui-form-label">联系单位</...

      今天要做一个二级联动的下拉框,看了LayUI的文档,感觉应该很容易。

       与联动下拉框相关的html文件主要内容:

        <div class="layui-form-item">
            <label class="layui-form-label">联系单位</label>
            <div class="layui-input-inline">
    			  <button class="layui-btn layui-btn-primary demo2" >
    				<label id="outUnit">请选择工作联系单位</label>
    				<i class="layui-icon layui-icon-down layui-font-12"></i>
    			  </button>			
            </div>
            <label class="layui-form-label">实施人员</label>
            <div class="layui-input-inline">
    			  <button class="layui-btn layui-btn-primary demo3" >
    				<label id="outUnitMember">请选择实施人员</label>
    				<i class="layui-icon layui-icon-down layui-font-12"></i>
    			  </button>									
            </div>
        </div>

      JavaScript内容:

    	var arrOutUnitList = [];
    	var arrOutUnitMemberList = [];
    	
    	layui.use(['dropdown', 'util', 'layer', 'table','form'], function(){
    	  var dropdown = layui.dropdown
    	  ,layer = layui.layer
    	  ,$ = layui.jquery
    	  ,form=layui.form;
    	  
    		$.ajax({
    			url:'getOutUnitList.php',
    			type:'POST',
    			success:function (data) {
    				for (var i in data) {
    					arrOutUnitList.push(data[i]);    
    				}
    			}
    		});
    	  
    	  //下拉列表的赋值
    	  dropdown.render({
    		elem: '.demo1'
    		,data: [
    			{title: '日常维护',id: 101},
    			{title: '定期巡检',id: 102},
    			{title: '数据处理',id: 103},
    			{title: '帐号权限',id: 104},
    			{title: '视频会议',id: 105},
    			{title: '网络运维',id: 106},
    			{title: '耗材购置',id: 107},
    			{title: '其他工作',id: 108},
    			]
    		,click: function(obj){
    			document.getElementById('workType').innerHTML=obj.title;
    		},
    	  })
    	  
    	  dropdown.render({
    		elem: '.demo2',
    		data: arrOutUnitList,
    		click: function(obj){
    			document.getElementById('outUnit').innerHTML=obj.title;
    			arrOutUnitMemberList = [];
    			$.ajax({
    				url:'getOutUnitMemberList.php',
    				data:"C01="+obj.title,
    				type:'POST',
    				async:false,
    				success:function (data) {								
    					for (var i in data) {
    						arrOutUnitMemberList.push(data[i]);
    					}
    				}
    			});
    											
    		}
    	  })
    	  
    	  dropdown.render({
    		elem: '.demo3'
    		,data: []
    		,click: function(obj){
    			document.getElementById('outUnitMember').innerHTML=obj.title;
    		    //layer.tips('点击了:'+ obj.title, this.elem, {tips: [1, '#5FB878']})
    		}
    	  })	  
    	  
    	});

      本以为就搞定了,可是点击联系单位后,实施人员下拉框就是不显示,太奇怪了!

      让组件重新渲染也不行。

      那就初始化不赋值了,改变赋值位置,就是将实施人员的赋值在联系单位下拉框的点击事件里:

    	  dropdown.render({
    		elem: '.demo2',
    		data: arrOutUnitList,
    		click: function(obj){
    			document.getElementById('outUnit').innerHTML=obj.title;
    			arrOutUnitMemberList = [];
    			$.ajax({
    				url:'getOutUnitMemberList.php',
    				data:"C01="+obj.title,
    				type:'POST',
    				async:false,
    				success:function (data) {								
    					for (var i in data) {
    						arrOutUnitMemberList.push(data[i]);
    					}
    				}
    			});
                //将实施人员下拉框的赋值放到这里,并且删除它的初始化赋值
    			dropdown.render({
    				elem: '.demo3',
    				data: arrOutUnitMemberList,
    				click: function(obj){
    					document.getElementById('outUnitMember').innerHTML=obj.title;
    				}
    			});
    		}
    	  })

      可以显示了,问题又来了!只能显示一次的点击。就是第一此点击联系单位,选择一个单位后,对应的实施人员可以显示出来了,可是再次换单位,实施人员的下拉框不变化了!

      怎么会这么奇怪?看官网文档,也没有这方面的说明,这么优秀的一个框架怎么会出现这样的问题?

      折腾了4个小时,投降了,换成select好操作一些。

      HTML部分更改为:

        <div class="layui-form-item">
            <label class="layui-form-label">联系单位</label>
            <div class="layui-input-inline">
                <select name="outUnitList" id="outUnitList" lay-filter="outUnitList">
    				<option value=""></option>
    			</select>
    
            </div>
            <label class="layui-form-label">实施人员</label>
            <div class="layui-input-inline">
                <select name="outUnitMember" id="outUnitMember">
    				<option value=""></option>
    			</select>
            </div>
        </div>

      Javascript部分更改为:

    		$.ajax({
    			url:'getOutUnitList.php',
    			type:'POST',
    			success:function (data) {
    				for (var i in data) {
    					arrOutUnitList.push(data[i]);
    					$('#outUnitList').append(new Option(data[i], data[i]));	
    				}
    				form.render('select');
    			}
    		});
    	  
    	  //下拉列表的赋值
    	  dropdown.render({
    		elem: '.demo1'
    		,data: [
    			{title: '日常维护',id: 101},
    			{title: '定期巡检',id: 102},
    			{title: '数据处理',id: 103},
    			{title: '帐号权限',id: 104},
    			{title: '视频会议',id: 105},
    			{title: '网络运维',id: 106},
    			{title: '耗材购置',id: 107},
    			{title: '其他工作',id: 108},
    			]
    		,click: function(obj){
    			document.getElementById('workType').innerHTML=obj.title;
    		},
    	  });
     
    	 form.on('select(outUnitList)', function(data){
    		 var selectUnitName = data.value; //选择的单位名称
    		 // console.log(selectUnitName);
    		 $.ajax({
    			 url: 'getOutUnitMemberList.php',
    			 data:"C01="+selectUnitName,
    			 dataType: 'json',
    			 type: 'post',
    			 success: function (returnData) {
    				 $('#outUnitMember').empty();
    				// for (var i in returnData) {
    				// 	$('#outUnitMember').append(new Option(returnData[i], returnData[i]));	
    				// }
    				 $.each(returnData, function (index, value) {
    					 $('#outUnitMember').append( new Option(value, value) );
    				 });
    				 form.render('select');
    			 }
    		 });
    	 });
    

      php获取实施人员:

    <?php
    require 'DRlinkConfig.php';
    $C01 = $_POST['C01'];
    $sql = "select * from droutunitmemberlist where c01='$C01'";
    $res = $mysqli->query($sql);
    $returnReslut = array();
    while ($row = $res->fetch_array()){	
    	array_push( $returnReslut,$row['C03']);
    }
    header('Content-type:text/json');
    echo json_encode($returnReslut);
    $res->free();
    $mysqli->close();
    ?>

      解决两个下拉框联动的问题了。

      今天遇到的这个问题真感到奇怪。

    展开全文
  • layui下拉框的一些常用设置:设置必选;下拉框选中事件;动态插入数据;重新渲染;不想渲染
    • 设置必选;下拉框选中事件;动态插入数据;重新渲染;不想渲染
    •  设置必须时 lay-verify="required",必须设置默认值为空value=""
    • <select name="select_store_id" lay-verify="required"  lay-filter="select_store_id">
          <option value="">请选择一个门店</option>
      </select>
      
      layui.form.on('select(select_store_id)', function (data) {
       console.log(data.value);
      })
      $.each(e.result.list, function(i,item){
          var store_opn = '<option value="'+item.store_id+'" >'+item.title+'</option>';
          $("#prize_store_id").append(store_opn);
      });
      form.render("select");
      <select lay-ignore  name="select_store_id" lay-verify="required"  lay-filter="select_store_id" >
          <option value="">请选择一个门店</option>
      </select>

    展开全文
  • layui下拉框监听点击

    2021-12-02 16:30:04
    div class="layui-form-item"> <label class="layui-form-label" style="width:100px">选择任务</label> <div class="layui-input-block"> <select id="library" name="library" lay-...
  • layui下拉框实现级联

    千次阅读 2020-12-31 09:12:16
    选择city北京上海广州深圳杭州选择区域layui.use('form', function () {var form = layui.form;layui.form.on('select(cityfilter)', function (data) {if (data.value == "") {$('#quyuid').html('请选择区域');...
  • layui下拉框多选功能

    千次阅读 2021-03-31 15:54:53
    select[multiple]+.layui-form-select>.layui-select-title>input.layui-input { border-bottom: 0 } select[multiple]+.layui-form-select dd { padding: 0; } select[multiple]+.layui-form-.
  • Layui 下拉框多选

    2021-03-10 17:20:31
    div class="layui-form-item"> <label class="layui-form-label layui-form-required">角色:</label> <div class="layui-input-block"> <div id="userEditRoleSel"></div> <...
  • 1.先检查有没有引入layui.js2.然后看有没有被包住,3.查看是否有以下代码layui.use('form', function(){var form = layui.form;});如果条件都满足,通常是没有问题的。但如果用了laytpl,就有可能不显示,解决办法...
  • 添加时要把hiddenId清空,上面那个reset是没有起到这个作用的,它只在第一次打开弹框时有...不加的话,当我们点击编辑时即使下拉框有数据也不能提交除非你新选择,但我们要的是不去重新选择。 ...
  • 因为layui中的下拉框会自己判断,位置不够就向上展示。所以我希望就是不管位置够不够都要向下展示。 由于问题暂时无法复现,所以画图说明一下,一般情况下就是红框的向下。除非位置不够就会变成蓝框的朝上显示。 ...
  • layui下拉框后台动态赋值

    千次阅读 2020-12-19 12:04:56
    前台页面:前台js:layui.use(['form', 'upload', 'layer'], function () {var form = layui.form;//检查项目添加到下拉框中$.ajax({url: '../hwjg_App/hwjgApp_ashx/GetXm.ashx',dataType: 'json',type: 'get',...
  • charset=UTF-8"> 教学平台title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script> <link rel="stylesheet" href="sources/layui/css/layui.css" media="all"> head> <body> ...
  • 主要为大家详细介绍了layui实现下拉框三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 直接上代码: for(var i=0;i<arr.length;i++){ $('#week').find("option[value="+arr[i]+"]").attr("selected",true); } form.render(); //再次渲染
  • layui下拉框联动查询效果

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

空空如也

空空如也

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

layui下拉框

友情链接: PulSAR-ADC-AD7982.zip