Layui动态渲染下拉框

本例包含测试页面代码，工具方法只有selectUtil

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Layui动态下拉框</title><link rel="stylesheet" href="../../layui/css/layui.css" /><style>body {padding: 18px;}</style></head><body><form class="layui-form"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">选择框</label><div class="layui-input-inline"><select id="select_type"></select></div></div></div></form></body><script src="../../layui/layui.js"></script><script>layui.use(['form'], function() {var $ = layui.$,form = layui.form;// 生成测试数据var datas = [];for (var i = 0; i < 40; i++) {datas.push({id: i,text: 'text_' + i});}//动态渲染下拉框selectUtil.render({id: 'select_type',data: datas});});</script><script>// 动态实现Layui下拉框工具方法var selectUtil = {render: function(param) {var $ = layui.$,form = layui.form;var id = param.id,prop = param.prop || {id: 'id',text: 'text'},datas = param.data || [];var $select = $('#' + id);//重置下拉框$select.empty();$.each(datas, function(index, item) {var $option = $('<option value="' + item[prop.id] + '">' + item[prop.text] + '</option>');$select.append($option);});form.render('select');}}</script>
</html>

Layui动态渲染下拉框相关推荐

select2动态渲染下拉框以及下拉数据格式化
//动态渲染下拉框 $('select[name="userid"]').html(getOption($userName, 'personname')).val('{$ITEM- ...
layui怎么给下拉框赋值_layui给select下拉框赋值
转: layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function() { var form = la ...
layui给select下拉框赋值
layui给select下拉框赋值 //重新渲染表单函数function renderForm() {layui.use('form', function() {var form = layui.fo ...
thymeleaf(th:each th:selected) 从后台动态获取下拉框数据回显及选中
thymeleaf(th:each th:selected) 从后台动态获取下拉框数据回显及选中 <select οnchange="getChilds(this.value)&quo ...
chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值，chosen 实现远程搜索加载下拉选项
chosen.jquery.js .chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值,chosen 实现远程搜索加载下拉选项 chosen. ...
java动态生成下拉框，标注信息，HSSFDataValidation和数据有效性等设置
POI的基础使用 java动态生成下拉框属性,设置下拉框数据有效性 /*** 设置下拉框元素** @param firstRow 起始行* @param endRow 结束行* @param firs ...
编程案例——layui的table表格并获取选中的数据、layui监控select下拉框并将隐藏的div显示
layui table表格展示效果代码前端代码后端代码:我们需要注意后端给前端返回数据的格式获取radio标签所对应的数据条目问题描述解决办法 layui监控select下拉框并将隐藏的 ...
fastadmin 动态赋值下拉框
记录:fastadmin 动态赋值下拉框 html代码: <div class="form-group"><label class="control-l ...
layui 数据表格下拉框_layui学习——数据表格嵌套下拉列表，并实现动态更新
layui学习--数据表格嵌套下拉列表,并实现动态更新项目中有些字段的数据为固定的几个值,这些字段在数据表格中显示为汉字,但在数据库中以数字形式存储,例如:仓库属性(0:普通仓/1:检验仓/2:报废 ...

Layui动态渲染下拉框

Layui动态渲染下拉框相关推荐

最新文章

热门文章