Layui——下拉多选框

怀里有猫33

已于 2022-06-22 10:08:21 修改

阅读量1.1k

点赞数

文章标签： layui java

于 2022-06-22 09:50:13 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43259310/article/details/125403021

版权

博客内容涉及使用JavaScript库xmSelect实现在页面上渲染下拉选择框，配置了主题、过滤、提示文字和高度等属性，并通过调用wssdSelect()函数从后端接口获取数据更新选择框内容。后端接口/wssdSelect根据字典名称返回数据，实现了动态加载字典数据到前端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

xmSelect.render({
  el: '#da', //<div>里面的id 自己设置
  theme: {
    color: '#0984ff',
  },
  filterable: true,
  tips: '文字',//自定义文字
  height: '250px',
  prop: {
    name:'dicMemo',
    value:'dicVal',
  },
  data: []
})

// 获取档案下拉框
wssdSelect()
function wssdSelect() {
  $.ajax({
    url:'' //接口
    ,success:function (res) {
      daSelect.update({
        data:res.data
      })
    }
  })

<div>里面写数据库里的字典

<div class="layui-inline" style="width: 1rem;">
    <select name="lx" lay-verify="">
      <option value="">请选择类别</option>
      ${dict.getOptions('字典名称','')}
    </select>
</div>

后端接口

@RequestMapping("/wssdSelect")
@ResponseBody
public DataRes wssdSelect() {
    QueryWrapper<SDictionary> qw = new QueryWrapper<>();
    qw.eq("dic_name","wssdlx");
    List list = dictionaryService.list(qw);
    return DataRes.success(list);
}