如何将数据库数据遍历在select多级联动上

提问 未结 7 178
一生挚爱陈涛
悬赏:80飞吻
版本:扩展组件 浏览器:
最近在做一个项目,打算在首页有一个select多级联动的搜索,我是这样设计的(上图): ,点击下拉框选择想要查看的数据,如:点击“街道数据”: ,就要显示街道数据,点击区县数据就要显示区县的详细数据,目前我的代码是这样的:, 但是我们要求这些我们所有的地区,街道是要遍历出来,不能是死数据,还要根据点击的位置数据进行显示!
询问各位大佬,怎么能实现我现在的需求呢[委屈] [爱你]
回帖
  • 你可以看看这个https://fly.layui.com/extend/CascadeSelect/
    0 回复
  • Lazyin
    2019-10-8
    这个问题很简单的,仔细看一下文档。
    大概操作就是,每次需要重新加载select数据时,
    通过js重新添加select的option,然后form.render('select') 就行了
    0 回复
  • 沐瞳
    2019-10-8
    具体的原理就是监听layui的下拉框选择事件
    属性为:lay-filter="filter"

    form.on('select(filter)', function(data){
    console.log(data.elem); //得到select原始DOM对象
    console.log(data.value); //得到被选中的值
    console.log(data.othis); //得到美化后的DOM对象
    });
    得到被选中的值后再给下一级下拉框赋值
    也就是你数据里面的children属性,遍历它,赋值
    0 回复
  • 沐瞳
    2019-10-8
    0 回复
  • @沐瞳 那我应该怎么写根据我们选择的位置信息,出现几个下拉框(比如,选择区县数据的话就是第一个下拉框后面有三个下拉框,分别为(北京,北京,西城))
    0 回复
  • 1、html:
    <div class="layui-input-inline">
    <select id="typeId" name="typeId" lay-filter="province" class="province typeId">
    <option value="" >请选择xxx类型</option>
    </select>
    </div>
    2、js:
    开始直接调用这个函数:
    type();

    //查询类型
    function type(){
    $.post("你的url……",function(res){
    if(res.code==0){
    res=res.data;
    var options = '<option value="">请选择xxx类型</option>';
    for(var i=0;i<res.length;i++){
    options += '<option value="'+res[i].id+'">'+res[i].name+'</option>'//你显示的东西
    }
    $("#typeId").html(options);
    form.render();
    }
    })
    }

    试试看~
    0 回复
  • 沐瞳
    7天前
    @一生挚爱陈涛 不是有children数组吗,遍历获取然后渲染为下拉框
    0 回复