layui如何动态添加下拉选择框(已返回JSON数据)

提问 已结 7 349
GuderianLin
GuderianLin 2020-2-12
悬赏:20飞吻
版本:layui 最新 浏览器:谷歌
JSP页面
<body>
<form class="layui-form" action="/" method="post" onsubmit="closeForm()">
<%--信息栏--%>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">仪器编号</label>
<div class="layui-input-block">
<input type="text" name="Key_id" required lay-verify="required" placeholder="请输入材料编号" class="layui-input" >
</div>
</div>
</div>

<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">仪器名称</label>
<div class="layui-input-inline">
<input type="text" name="name" required lay-verify="required" placeholder="请输入材料名称" class="layui-input" >
</div>
</div>
</div>

<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">生产厂商</label>
<div class="layui-input-inline">
<input type="text" name="factory" required lay-verify="required" placeholder="请输入材料生产厂商" class="layui-input" >
</div>
</div>
</div>

<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">规格型号</label>
<div class="layui-input-inline">
<input type="text" name="factory" required lay-verify="required" placeholder="请输入材料生产厂商" class="layui-input" >
</div>
</div>
</div>

<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">使用实验室</label>
<div class="layui-input-inline">
<select name="use_lab" id="use_lab">
<option name="noon" value="无">无</option>
</select>
</div>
</div>
</div>

<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">设备状况</label>
<div class="layui-input-inline">
<select class="layui-select-group" name="situation" id="situation">
<option name="perfect" value="完好">完好</option>
<option name="bad" value="待维修">待维修</option>
</select>
</div>
</div>
</div>

</form>

<script>
function closeForm() {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);//关闭当前页
window.parent.location.reload();
}

layui.use(['form','jquery'], function(){
var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
$.ajax({
url:'/SreachLabName',
dataType:'json',
type: 'post',
success:function(data){

}
});
form.render();
});

</script>

</body>
//后台代码
@ResponseBody
@RequestMapping(value = "/SreachLabName")
public Map<String, Object> SreachLabName(){
List<String> list_1 = biologyLabService.getLabName();
List<String> list_2 = chemistryLabService.getLabName();
List<String> list_3 = computerLabService.getLabName();
List<String> list_4 = physicsLabService.getLabName();
List<String> list_Final = new ArrayList<String>();
list_Final.addAll(list_1);
list_Final.addAll(list_2);
list_Final.addAll(list_3);
list_Final.addAll(list_4);
Map<String, Object> result = new HashMap<>();
result.put("code", 0);
result.put("msg", "成功");
result.put("count", list_Final.size());
result.put("data", list_Final);
return result;
}


回帖
  • CrazyYi
    2020-2-13
    思路:
    1、自定义一个select render方法。在该方法中,根据data,循环进行<option>的创建;
    2、select render之后,需要对外层的 form.render;
    3、将该方法放在想要触发的地方,最好是放在 data(就是下拉列表的值)获取成功之后的地方。

    以下代码,在本地已经测试验证通过,仅供餐卡:
    <script>
    /**
    * 自定义 select 渲染
    */
    const selectRender = function () {
    console.log('select render');
    const data = ['实验室1', '实验室2', '实验室3', '实验室4',];
    let _html = '';
    $.each(data, function (i, v) {
    _html += `<option name="noon" value="${i}">${v}</option>`;
    });
    $('#use_lab').html(_html);
    form.render(); // 切记:一定要对form 进行重新渲染
    };
    selectRender(); // 可以把该事件,放在 data 数据请求回调成功的方法里
    </script>
    放一个截图:



    希望对你有用
    0 回复
  • CrazyYi
    2020-2-13
    @GuderianLin 另外,一个小小的建议哈。上传代码的时候,是不是可以把不需要的部分去掉,仅保留关键部分。哈,一开始我都看晕了。
    0 回复
  • @CrazyYi 好嘞
    0 回复
  • @CrazyYi 能不能再讲解详细一点,弄了一下午都没搞好
    0 回复
  • @CrazyYi 就success里面,应该怎么写?
    0 回复
  • CrazyYi
    2020-2-13
    @GuderianLin 我大概模拟写了一下,供你参考。

    <script>
    /**
    * 自定义 select 渲染
    */
    const selectRender = function (data) {
    console.log('select render');
    let _html = '';
    $.each(data, function (i, v) {
    _html += `<option name="noon" value="${i}">${v}</option>`;
    });
    $('#use_lab').html(_html);
    form.render(); // 切记:一定要对form 进行重新渲染
    };

    layui.use(['form','jquery'], function(){
    var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
    $.ajax({
    url:'/SreachLabName',
    dataType:'json',
    type: 'post',
    success:function(data){
    // 假设你的data 结构是 data.lab 字段包括实验室数据 ['实验室1', '实验室2', '实验室3',]
    let labArr = data.lab;
    selectRender(labArr); // 在success 里面调用该事件
    }
    });
    });
    </script>
    0 回复
  • 繁星654
    2020-2-13
    /给表单赋值
    form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
    "username": "贤心" // "name": "value"
    ,"sex": "女"
    ,"auth": 3
    ,"check[write]": true
    ,"open": false
    ,"desc": "我爱layui"
    });
    0 回复