1.需要引用form模板
layui.use(['form'], function () {
var form = layui.form;
});
2.html代码
<div class="layui-form">
<select name="city" lay-verify="" lay-filter="test" id="select">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
</div>
注:当需要动态生成select选项时,如果没有layui的下拉效果,需要在生成完dom结构之后form.render();一下,重新渲染。这里的form是第1点模板中的form变量。
如果还没有效果,注意是不是没有在外层嵌套div.layui-form
3.获取select值
像平时获取select值就可以了。例如$("#select").val();
4.select赋值
也是像平时一样select赋值就行。例如$("#select").val(”010“);
5.select的change事件
需要在select标签上增加lay-filter="test",test可以随意命名。
form.on('select(test)', function (data) {
//TODO执行自己的代码
});
form.on('select(test)', function(data){
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值]
$("#batch").val(data.value)
console.log(data.othis); //得到美化后的DOM对象
});
6.遇到的问题
问题描述:在layer弹框中,如果使用parent.layer.open()弹出一个弹框,之后success回调渲染select,select没有效果。
发表评论