利用layui自定义select动态组件

样式:


张三,李四的数据添加如下

//JavaScript代码区域

layui.use(['table', 'layer', 'jquery', 'form'], function() {

var table = layui.table;

var layer = layui.layer;

var $ = layui.jquery;

var form = layui.form;

var type = $('#decSelect').attr('type');

alert(type);

//重新渲染表单

function renderForm() {

layui.use('form', function() {

var form = layui.form; //高版本建议把括号去掉,有的低版本,需要加()

form.render();

});

}

$.each([{

id: 3,

name: "张三"

},{

id: 4,

name: "李四"

}], function(key, value) {

alert(value.name);

$("#decSelect").append("<option value=" + value.id + ">" + value.name + "</option>");

});

renderForm(); //表单重新渲染,要不然添加完显示不出来新的option

});


页面:

<form class="layui-form" action="">

<div class="layui-form-item proSelect">

<label class="layui-form-label">学生姓名</label>

<div class="layui-input-block editWidth">

<select name="list" lay-verify="required" id="decSelect" type="" url="">

<option value="">请选择</option>

</select>

</div>

</div>

</form>


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容