<divid="selected_box"class="layui-input-inline xm-select-demo"style="width:150px;"><inputtype="hidden"id="poi_category_id"></div> 异步获取代码 //获取分类; $.ajax({ type:'get', url:"./api/api.php?act=getCategory&token=3
适用场景:1.宽度固定,高度需要自适应。 eg:在弹出框里使用xm-select插件,需要选择很多数据,并展示出来。 例如:红框的高度根据你选择的内容的多少而变化,就可以使用第三种方式或者第一种方式。如果不起作用,说明xm-select没有设置好。
letlist=[];letpageSize=10;if(demoSelect==null){ orgNameSelect=xmSelect.render({ el:'#demoSelect', data:[],// 数据paging:true,// 是否分页pageSize:pageSize,// 每页数量max:10,// 最多可以选的个数// 触发监听on:function(data){// 监听到的数据类型包含 name,valueletarr=data.arr;letchec...
第二步: 引入 xm-select.js 第三步: 写一个`<div id="demo1"></div>` 第四步: 渲染 1 2 3 4 5 6 7 8 9 vardemo1 = xmSelect.render({ el:'#demo1', language:'zn', data: [ {name:'张三', value: 1}, {name:'李四', value: 2}, ...
<divclass="layui-input-inline"><!--展示下拉多选框--><div id="div-task_team"class="xm-select-demo"style="width: 600px;"></div></div><!--用于存储选择的数据,方便后期进行数据提交操作--><input type="hidden"id="task_team_sel"name="task_team_sel"value=""> ...
1.下载 xm-select 下拉框 下载地址:https://gitee.com/maplemei/xm-select/releases/tag/v1.2.4 下载后解压,复制 xm-select.js 到项目中。 放在js 文件夹中。 2.使用 xm-select 下拉框 在项目 layui.js 后面引入 xm-select.js 文件。 顶部搜索中的图书分类下拉框,修改为使用 xm-select 下拉框。
1. 引入 `dist/xm-select.js` 2. 写一个`<div id="demo1"></div>` 3. 渲染 var demo1 = xmSelect.render({ el: '#demo1', data: [ {name: '水果', value: 1, selected: true, disabled: true}, {name: '蔬菜', value: 2, selected: true}, ...
简介:【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和...
xm-select等插件提供了丰富的样式类,允许开发者通过覆盖这些类的样式来实现自定义。例如,修改下拉框的宽度、字体大小等: css /* 修改下拉框宽度 */ .xm-select-dropdown { width: 400px !important; /* 使用!important确保优先级 */ } /* 修改选项字体大小 */ .xm-select-item { font-size: 16px; }...