Layui 搜索下拉框的使用以及动态数据绑定

讨论 未结 7 198
浪潮71
浪潮71 2019-11-27
悬赏:20飞吻
option选项已经获取,页面渲染无效
问题描述原因:
1.是否未放入以下区域内呢?
        form.on('submit(formStep03)', function (data) {
});
2.form.render();失效?
以下是代码部分
        $('.layui-select-title .layui-input').bind("input propertychange",'input',function(){
var inputValue=$('.layui-select-title .layui-input').val();
if(inputValue!=''){
$.ajax({
type: 'post',
url:'${gm}/contract/approveHandle/querybankFuzzySearch',
data:{keyWord:inputValue,flowId:$("#flowComId").val()},
success : function(data) {
$("#bankSelect").empty();
console.log(data.data);
var listData=data.data;
if("200" == data.code){
for(var i=0;i<listData.length;i++){
$("#bankSelect").append("<option value='"+i+"'>"+listData[i].bankName+"</option>")
}
}else{
layer.msg(data.message);
}
}
})
}else {
layui.msg('请输入搜索字段!');
}
});
回帖
  • 浪潮71
    2019-11-27
    下拉选项可以盲选,页面渲染失效;加入form.render(); option就去不到数据,无法动态赋值;还是说form.render();放的位置不对
    0 回复
  • Liliy
    2019-11-27
    重新渲染放在赋值之后
    0 回复
  • 解惑大师
    2019-11-27
    for循环之后加可以的
    0 回复
  • 浪潮71
    2019-11-27
    @解惑大师 我的代码不是放在form.on()里,所以form.render();失效,影响模糊搜索
    0 回复
  • 浪潮71
    2019-11-27
    @Liliy 加入form.render();模糊查询的数据就取不到
    0 回复
  • IDyun
    2019-11-27
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>
    <div class="demoTable">
    搜索ID:
    <div class="layui-inline">
    <input class="layui-input" name="id" value='100' id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
    </div>
    <form class="layui-form" action="">
    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">搜索选择框</label>
    <div class="layui-input-inline">
    <select id="user" lay-verify="required" lay-search="">
    </select>
    </div>
    </div>
    </div>

    </form>

    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
    layui.use(['form', 'layedit', 'laydate'], function(){
    var form = layui.form;

    var $ = layui.$, active = {
    reload: function(){
    var demoReload = $('#demoReload');

    $.get('/demo/table/user/',demoReload.val(),function(res){
    $("#user").empty();
    layui.each(res.data, function(index, item){
    $("#user").append(new Option(item.username,item.id));
    })
    form.render();
    });
    }
    };

    $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
    });

    });
    </script>

    </body>
    </html>
    0 回复
  • 浪潮71
    2019-11-27
    @IDyun 目前还是修改我的代码,现在的情况是这样的,可以看一下图片,想问一下怎么解决呢?


    0 回复