layui中,select组件需要注意的几个地方:
- select外需要嵌套form标签;
- 给select添加lay-filter=“test”;
- 要在layui.use函数内声明使用form监听等操作,或直接使用layui.form;
- 动态加载要用form.render(‘select’)更新渲染;
- 同一个select监听要写在一起;
- select的name属性是用于form提交的.
如果是静态加载1和2可以忽略;
动态加载未渲染要检查1、3、4;
监听无效要检查1、2、3、5;
如果用submit提交需要注意1、6;
form组件中有个lay-verify元素属性,支持多规则校验,也可自定义规则,submit提交时会自动校验。
完整代码示例:
html:
<form class="layui-form">
<select id="test" name="test" lay-filter="test">
<option value="">请选择...</option>
</select>
<button lay-submit lay-filter="save">提交</button>
</form>
js:
layui.use(['form'], function(){
var form = layui.form;
var data = {
[
'id': 1,
'name': 'test1'
],
[
'id': 2,
'name': 'test3'
],
[
'id': 3,
'name': 'test3'
],
};
data.forEach(function(item) {
$('#test').append(new Option(item.name, item.id));
});
form.on('select(test)', function(data){
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
form.on('submit(save)', function(data){
console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
});