php xmSelect使用

最新推荐文章于 2025-09-14 12:58:16 发布

原创最新推荐文章于 2025-09-14 12:58:16 发布 · 548 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#php #开发语言 #后端

本文介绍了如何通过xmSelect库在前端创建交互式的多级下拉菜单，展示了如何将JSON数据动态加载到下拉选项，并实现数据回调功能。重点讲解了如何设置组件属性和数据绑定，以及如何在用户选择后更新隐藏字段的值。

实现多下拉多选择使用 xmSelect

该插件的网址为 xm-selecthttps://maplemei.gitee.io/xm-select/#/component/install

下载该插件引用到框架中

<script src="__ROOT__/static/plugs/jquery/xm-select.js" type="text/javascript" charset="utf-8"></script>

使用方法

<div class="layui-form-item">
    <label class="layui-form-label label-required">指定赛项</label>
    <div class="layui-input-block">
        <div class="xm-select-demo" name=contest_id id="demo2" style="width: 500px;"></div>
    </div>
    <input type=hidden name=contest_id   id="contest_id" value='' style=""/>
</div>

datas= res.data  ajax传来的json数据
var demo2 = xmSelect.render({
    el: '#demo2',
    data: datas,
    direction: 'down',
    filterable: true,
    autoRow: true,
    clickClose: true,
    toolbar: {show: true},
    on: function(data) {
        //这里是数据回调可用卓其他数据处理，
        //比如我这里是物料的单价另外显示在其他div中
        //点击选中的下拉列表中的值能获取到，用作其他处理
        var arr = data.arr;
        var str2 =[];
        if (arr.length > 0) {
            for (let i = 0; i < arr.length; i++) {
                str2.push(arr[i].id);
            }
        }
        $("#contest_id").val(str2);
    }

})