六行代码实现mobiscroll互斥选择

1.概述

本文的实现采用的是2.x的mobiscroll ，理论上3.x也是可以用的，本猿大概浏览3.x的api大概就是增强版的2.x

根据研究mobiscroll给出的方法，我们发现能够拿到1.当前按下去的值，2.选中的值（arrlist）

由此，我们整理思路。给原始option分别设置value和m-group，通过当前按下的值去寻找它所在的group，然后再把arrlist内不是该group中的值去掉。然后，大功告成！

2.实现

• 首先，为select的option设置好value和group

代码如下：

        <select id="se1" multiple="multiple">
            <option value="0" m-group="A">无</option>

            <option value="1" m-group="B">高血压</option>
            <option value="3" m-group="B">高血压</option>
            <option value="4" m-group="B">高血压</option>

            <option value="2" m-group="C">糖尿病</option>
            <option value="5" m-group="C">糖尿病</option>
            <option value="6" m-group="C">糖尿病</option>
            <option value="7" m-group="C">糖尿病</option>
        </select>

1. 找到此刻按下去的值
2. 找到选中的当前值（arrlist）
3. 由此刻按下去的值找到它所在的分组
4. 去掉arrlist内所有不是3中的分组

• 以上就是基本思路，接下来就是代码实现了

                /**
                 * 互斥mobiscrol select
                 * @param $select select的jq选择器
                 * @param inst mobiscroll内部对象
                 * @param item 选中元素
                 */
                function mutexMobiScroll($select,item,inst) {
                    myArr();//放到main.js里面就好了
                    var _thisVal = item.context.dataset.val; //当前选中的值
                    var _selectArr = inst.getVal(); //选中的数组
                    var _thisgroup = $select.find('option[value='+_thisVal+']').attr("m-group");//选中的分组

                    $select.find('option[m-group!='+_thisgroup+']').each(function () {  //找到不是选中组的全部移除
                        _selectArr.remove($(this).val());
                    })

                    inst.setVal(_selectArr); //设置选中的值
                }

---

分析中有从arrlist中删除元素的操作，本猿采用如下方法（有更好方法的可以私信）

                    //增加数组删除某个值(x)属性  arr.remove(x) 放到main.js里面就好了
                    function myArr() {
                        Array.prototype.indexOf = function(val) {
                            for (var i = 0; i < this.length; i++) {
                                if (this[i] == val) return i;
                            }
                            return -1;
                        };
                        Array.prototype.remove = function(val) {
                            var index = this.indexOf(val);
                            if (index > -1) {
                                this.splice(index, 1);
                            }
                        };
                    }

效果如下

（请忽视选择图标的错误）

附上源码

点击下载