layui xmSelect

### 如何在 Layui 中使用 xmSelect 组件

#### 初始化 xmSelect 组件
为了初始化 `xmSelect` 组件，在HTML文档中需定义一个容器用于承载该组件。通常情况下，这个容器会放置在一个表单内部以便于布局管理。

<div class="layui-row">
    <label class="layui-form-label">店铺选择</label>
    <div class="layui-input-block">
        <div id="seltype" style="width: 100%;"></div> <!-- 容器 -->
    </div>
</div>

此部分代码创建了一个带有标签 "店铺选择" 的输入区块，并设置宽度为百分之百的子 `<div>` 来容纳后续通过 JavaScript 动态生成的选择列表[^3]。

#### 加载并配置 xmSelect 插件
接下来是在JavaScript端引入插件以及对其进行必要的配置：

// 假设已经正确加载了 layui 和 xmSelect 库文件
layui.use(['form', 'xmSelect'], function(){
    var form = layui.form;
    var xmSelect = layui.xmSelect;

    // 配置项对象
    var config = {
        el: '#seltype',
        name: 'store[]',
        radio: false,
        model: { label: { type: 'text' } },
        filterable: true,
        theme: {
            color: '#5FB878'
        }
    };

    // 实例化 xmSelect 对象
    var instance = xmSelect.render(config);
});

上述脚本实现了对指定ID(`#seltype`)元素的应用程序实例化操作，同时设置了名称属性、启用过滤功能以及其他样式选项等特性[^1]。

#### 异步加载数据与监听事件
当涉及到动态获取远程服务器上的数据时，则可以利用回调函数来处理这种情况下的响应结果；另外还可以绑定各种交互行为到特定的动作上，例如当选定某一项之后触发相应的逻辑业务流程。

var dataUrl = '/api/getStores'; // API 地址假设

config.datasource = function(callback){
    $.getJSON(dataUrl, {}, function(res){
        if (res.code === 200 && res.data.length > 0) {
            callback({
                code : 0,
                msg  : '',
                data : res.data.map(function(item){return {'name': item.name,'value':item.id}})
            });
        }else{
            callback({code:-1,msg:'无有效数据'});
        }
    });
};

instance.on('change',function(data){
    console.log('已选:',data.names); // 输出所选项的文字描述
});

instance.reload(); // 刷新以应用新的数据源设定

这里展示了如何将来自后端接口的数据映射成适合前端展示的形式，并且每当用户做出更改时都会打印当前被选取的内容至控制台日志中去[^4]。