Layui使用select标签不显示的问题

Layui使用select元素或者其他表单元素不显示或异常的问题

问题

select元素没有被Layui正确地渲染.
HTML中select元素消失(实际上Layui会先隐藏select元素,然后再生成一个新的,但是我的情况是光隐藏了,没生成)

查找原因

出问题的代码

<!-- 父元素的class="layui-form" -->
<form class="layui-form">
	<div class="layui-input-inline">
		<!-- name属性值为nodeType或nodeName会导致冲突 -->
		<select name="nodeType" lay-filter="code">
			<option value="1" >1</option>
			<option value="2" >2</option>
		</select>
	</div>
</form>
<script>
	// 引入form模块
	layui.use('form', function(){
  		var form = layui.form;
  	}
</script>
});

先看官方文档
Layui关于表单的官方文档

你必须给表单体系所在的父元素加上class=“layui-form”,一切的工作都会在你加载完form模块后,自动完成。

检查父元素是否有class属性layui-form,以及是否引入form模块,我的代码问题不是出在这里

继续测试,最后发现是name属性的值出了问题
select标签的name属性为 nodeType或者nodeName时会导致Layui不会渲染 select元素.最要命的是没有任何报错,找了半天才发现是name属性的值可能导致了冲突。

解决方案

先根据官方文档检查父元素的class元素是否有layui-form,再检查js部分是否引入form模块。

如果上面两步检查完毕,再看看name或者其他属性是否用了一些可能冲突的单词。我这次遇到的是属性值为nodeTypenodeName发生了冲突,替换掉就好了,或许还有其他的。

参考链接

jquery冲突的关键字nodeName、nodeValue和nodeType

MDN关于Node的说明

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
layuiselect标签二级联动可以通过绑定select事件来实现。首先,在HTML代码中,需要设置两个select标签,一个作为父级选择,另一个作为子级选择器。父级选择器的select标签需要添加lay-filter属性,用于绑定select事件。子级选择器的select标签需要添加id属性,用于在JavaScript代码中进行操作。 接下来,在JavaScript代码中,使用form.on('select(father_enter)', function(data){...})来绑定select事件。当父级选择器的值发生变化时,会执行绑定的回调函数。在该回调函数中,可以根据父级选择器的值进行相应的操作。 例如,可以通过发送Ajax请求获取子级选择器的数据,并将数据拼接成option标签,然后将拼接好的option标签添加到子级选择器中。最后,还需要调用form.render()方法来渲染form,以便让select显示出数据。 需要注意的是,如果忘记调用form.render()方法,那么select标签将不会显示数据。所以在拼接完option标签后,一定要记得调用form.render()方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [layuiselect 实现二级联动](https://blog.csdn.net/dangjunwei123/article/details/117258419)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值