layui中select及submit提交

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; //阻止表单跳转。如果需要表单跳转，去掉这段即可。});
});

layui中select及submit提交相关推荐

下拉框选中事件ajax,LayUI中select下拉框选中触发事件
SpringMvc的数据绑定流程在SpringMvc中会将来自web页面的请求和响应数据与controller中对应的处理方法的入参进行绑定,即数据绑定.流程如下: -1.SpringMvc主框架将 ...
layui中如果button按钮在form表单外面如何提交
HTML部分: <div><form class="layui-form" lay-filter="addForm" method=" ...
layui的form表单提交数据，layui的select框默认选中
1.提交数据 1.1html <form class="layui-form" action="" method=""> < ...
在layui中使用 jquery 触发select 的 change事件无效
在layui中使用 jquery 触发select 的 change事件无效使用layui.use监听select事件 <select lay-filter="demo" ...
html中加长提交按钮,HTML input submit提交按钮简介说明
摘要: 下文讲述html代码中input type='submit'时的相关属性简介说明,如下所示: input type='submit' 简介当input标签中 type='submit'时,代 ...
layui 中解决select onchange事件无效
layui将select改造了,所以直接写onchange无效,代之可以使用 lay-filter 属性 <div class="layui-col-xs4 layui-col-sm4 ...
layui中导航元素的简单使用
整体效果图所需界面 main.html界面代码 <!DOCTYPE html> <html lang="en"> <head><meta ...
button layui 点击事件_解决layui中的form表单与button的点击事件冲突问题
解决layui中的form表单与button的点击事件冲突问题 layui的form表单位置和button标签的位置重合,会使得button的click事件得不到响应,如图: 蓝色底为form的位置, ...
layui实现select下拉选择框组件（含代码、案例、截图）
layui实现select下拉选择框组件(含代码.案例.截图) 案例 · 效果图: 全部代码如下: <!DOCTYPE html> <html> <head>< ...

layui中select及submit提交

layui中select及submit提交相关推荐

最新文章

热门文章