layui隐藏和显示下拉框

最新推荐文章于 2024-08-29 16:32:55 发布

犯好运

最新推荐文章于 2024-08-29 16:32:55 发布

阅读量3.4k

点赞数 1

分类专栏： layui 文章标签： javascript

本文链接：https://blog.csdn.net/bigpaoa/article/details/108869766

版权

layui 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

本文介绍如何使用layui库在JavaScript中控制下拉框的显示和隐藏，特别是在国家地区城市联动选择中的应用。通过监听select事件，动态加载并显示相关下拉框，利用form.render更新显示效果。

摘要由CSDN通过智能技术生成

layui隐藏和显示下拉框
首先在jsp中编写下拉框（注意

后的id值）

<div id="orgList1">
            <label class="layui-form-label"><span style="color: red;">*</span>机构代码 </label>
            <div class="layui-input-inline" lay-filter="orgLists">
                <select type="text" name="orgList1" id="orgList1" lay-verify="required" lay-filter="orgList1" placeholder="请选择" autocomplete="off" class="layui-input">
                </select>
            </div>
        </div>

然后在jsp中进行设置隐藏
初始化隐藏

 $(function () {
    	//document.getElementById("orgList1").style.display="none";
    	//document.getElementById("orgLists").style.display="none";
    	$("#orgList1").hide();
    	$("#orgLists").hide();
    });

根据条件设置显示

 form.on('select(orgbranch)',
            function(data) {
    	     if(data.value !==  '0000' ){
    	    	 
    	     $("select[id='orgList']").append(om.omSelect('orgList'));
    	     $("#orgLists").show();
     	     $("#orgList1").hide();
     	   form.render("select");
     	     }else{
     	    	 
     	    	 $("select[id='orgList1']").append(om.omSelect('orgList1'));
         	     
         	    $("#orgList1").show();
         	    $("#orgLists").hide();
         	   //document.getElementById("orgLists").style.display="";
         	   form.render("select");
     	     }    
            });