layui 使用xm-select实现下拉框多选

记录：layui 使用xm-select实现下拉框多选

使用示例：

<script src="__STATIC__/plugs/layui-v2.5.6/ext/xm-select.js" charset="utf-8"></script>
<script>//渲染数据var oldVal = ""; //已选中的值var xmdemo1 = xmSelect.render({el: '#xmdemo1', tips: '请选择仓库下的库区',empty: '呀, 没有数据呢, 请先去选择仓库',name: 'ware_areas',data: [],})//监听切换仓库选择框，动态更新库区选择框form.on('select(ware_house)', function (data) {var ware_house_id = data.value;if(!ware_house_id){//渲染数据var xmdemo1 = xmSelect.render({el: '#xmdemo1', tips: '请选择仓库下的库区',empty: '呀, 没有数据呢',name: 'ware_areas',data: [],})return false;}         renderXmSelect(ware_house_id,oldVal);});// xmSelect渲染下拉框function renderXmSelect(ware_house_id,oldVal){var oldVal = oldVal.split(',');$.ajax({url: "/admin/yuanqu.WareArea/getWareAreaList",type: 'POST',async: true,data: {ware_house_id:ware_house_id},success: function (datas) {var data = datas.data;var val = [];                    for(var i = 0; i < data.length; i++){ //循环所有选项if(oldVal.indexOf(data[i].id+'') != -1){ //判断是否需要默认选中var con = {name:data[i].name, value:data[i].id, selected: true, disabled: false};} else {var con = {name:data[i].name, value:data[i].id, selected: false, disabled: false};}val.push(con);}var xmdemo1= xmSelect.render({el: '#xmdemo1',tips: '请选择仓库下的库区',empty: '呀, 没有数据呢',filterable:true,    //是否开启搜索searchTips:'请在此搜索库区名称',paging:true,    //是否开启自定义分页pageSize:20,    //分页条数radio:false, //是否开启单选模式,默认falserepeat:false,    //是否开启重复性模式,默认falseclickClose:false,    //是否点击选项后自动关闭下拉框,默认falsemax:0,  //设置多选选中上限  0-不限制theme:{color:'#1e9fff',maxColor:'#f00',hover:'#f2f2f2'},name: 'ware_areas',// layVerify:'required',    //表单验证, 同layui的lay-verifydata: val,on: function(data){// //arr:  当前多选已选中的数据// var arr = data.arr;// //change, 此次选择变化的数据,数组// var change = data.change;// //isAdd, 此次操作是新增还是删除  true/false// var isAdd = data.isAdd;},});}});}</script>

示例：

xm-select文档地址：https://maplemei.gitee.io/xm-select/#/component/install

layui 使用xm-select实现下拉框多选相关推荐

layui使用formselect4完成的下拉框多选，拼音搜索
PY方法找不到,差引入 js-pinyin.js. 加群:938624691,感谢群主分享链接: https://pan.baidu.com/s/1KNPXzfolEILkkW_LC2OvSw 提取 ...
LayUI可选择可输入下拉框
LayUI可选择可输入下拉框可输入的下拉框把input 叠加到select上,外观看起来像一个框. 利用z-index把 input框放到select 上层.并让select 不自动填充. 我现在 ...
解决layui数据表格中嵌套下拉框显示问题
在layui数据表格中嵌套下拉框时,下拉框不能正常弹出,仔细观察发现,点击下拉框时会有一个短暂的弹出动画,马上又消失了,遂猜想,大概是显示的问题,可能是被覆盖了,那么解决覆盖就可以了. 如图, 下拉框 ...
ajax 下拉框保留,Ajax生成select级联下拉框和清空多余选项
Ajax生成select级联下拉框和清空多余选项实现效果 function professionType(){ var obj=document.getElementById("下拉框id ...
selenium + python处理select标签下拉框的选项
selenium + python处理select标签下拉框的选项 1. 背景在爬取网页是,有时候我们会遇到下图中的下拉框,也就是< select > < /select > ...
下拉选框样式html,超酷select选择下拉框美化jQuery插件
jquery-nice-select是一款轻量级的select下拉选择框美化jQuery插件.该插件可以将原生的select元素转换为自定义样式的下拉选择框,并且在选择时带有很酷的CSS3过渡动画效果 ...
python selenium 下拉框选择_【selenium】基于python语言，如何用select选择下拉框
在项目测试中遇到了下拉框选择的控件,来总结下如何使用select选择下拉框: 下图是Select类的初始化描述,意思是,给定元素是得是select类型,不是就抛异常.接下来给了例子:要操作这个sele ...
html下拉框怎么默认选中,select获取下拉框的值下拉框默认选中方法
本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和文本值例如: 数字1 数字2 $("#numbers option:selected").val( ...
bootstrap-select实现下拉框多选效果
bootstrap-select实现下拉框多选效果听语音在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看方法/步骤 1 ...

layui 使用xm-select实现下拉框多选

layui 使用xm-select实现下拉框多选相关推荐

最新文章

热门文章