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
或者其他属性是否用了一些可能冲突的单词。我这次遇到的是属性值为nodeType
或nodeName
发生了冲突,替换掉就好了,或许还有其他的。