Layui下拉框的绑定

开发工具与关键技术：mvc、layui、js、html 作者：张俊辉撰写时间：2019年04月8日

对于Layui表单中的表单下拉框绑定中，我们会发现绑定上去了却没显示出来，那是因为你绑定的下拉框与layui插件表单渲染后的下拉框并不是同一个元素、同一个标签组成，因此绑定不了,该如何绑定下拉框其实只需要使用Layui里一个自带的方法——更新渲染form.render(); //更新全部form.render(‘select’); //刷新select选择框渲染，但我建议使用更新全部的方法，因为在使用更新select选择框渲染时因延迟问题当，用户进入页面就开始点击下拉框时，会绑定不了！插件需使用jQuery与Layui,代码如下:
HTML代码：

<form class="layui-form" lay-filter="InsertPurchasingManagement"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">付款方式</label><div class="layui-input-inline"><select lay-verify="required" name="PaymentModeID" class="SelectPaymentMode"><option value="">请选择</option></select></div></div></div>
</form>

JS代码：

$(function () {//付款方式(下拉框)$.post("/Purchase/SupplierMessage/SelectPaymentMode", function (data) {for (var k in data) {$(".SelectPaymentMode").append("<option value='" + data[k].id + "'>" + data[k].text + "</option>");}layui.use('form', function () {var form = layui.form;form.render();});});
}

对于封装的下拉框绑定方法则只需要在执行完绑定方法后执行下列代码即可：

layui.use('form', function () {var form = layui.form;form.render();
});

效果图如下：
对于一些初始值绑定的下拉框，只需要在赋值之后再执行更新全部的方法。代码如下：

//数据回填
layui.use('form', function () {var form = layui.form;form.val("ExaminePurchasingManagement", data);if (data.Tax == false) {$("#ExaminePN select[name='Tax']").val("false")}if (data.Tax == true) {$("#ExaminePN select[name='Tax']").val("true")}form.render();
});

效果图如下：

Layui下拉框的绑定相关推荐

layui 下拉框空选项不显示_layui下select下拉框不显示或没有效果
Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果 ...
如何实现下拉框的绑定
开发工具与关键技术:Visual Studio.MVC 作者:幻奏撰写时间:2019.7.5 下拉框你们都见过吧,下拉框的作用是方便用户更快的输入,同时也限制了用户,再也不怕用户乱写啦. 下拉框我们 ...
dataGridview与下拉框高级绑定
//在dataGridView里批量显示所有数据string sql = "select * from mingxing";SqlConnection con = new SqlC ...
layui下拉框怎么获取自定义值_layui如何得到select下拉框选中的值？
layui如何得到select下拉框选中的值?下面本篇文章介绍一下layui取得select下拉框选中值的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. layui如何得到se ...
layui 下拉框三级联动
项目需要用layui的三级联动,自己瞎整了一下,做个记录 1.表结构设计 CREATE TABLE `dt_area` ( `id` int(11) NOT NULL AUTO_INCREMENT ...
layui下拉框监听点击
<div class="layui-form-item"><label class="layui-form-label" style=&quo ...
LayUI下拉框默认选中方法
layui中有两种下拉框默认选中方法.注意两种方法必须加上form.render()才有效果. 1.方法一: $("#selectid").find("option[va ...
layui下拉框联动查询效果
前言之前有这么一个功能,需要设计一个联动效果来联动几个选择框,假设这里是院系-专业-班级,又或者省-市-县,又或者一级部门-二级部门等等的,一个下拉框选择联动另一个下拉框,其实都是异曲同工之妙. 解 ...
layui下拉框联动
定义下拉框: <div class="layui-input-inline layui-form" lay-filter="prov"><se ...

Layui下拉框的绑定

Layui下拉框的绑定相关推荐

最新文章

热门文章