Javascript 如何管理具有数百个选项的多选表单元素

我不喜欢

选择带有
多个属性的
元素，那些带有
属性（'type'）
的
选择多个
。人们总是被迫将键盘键与鼠标单击组合在一起以选择选项。另外，在移动设备上进行选择并不容易

但是，有一个供应商的产品使用此表单字段，其中包含许多表示用户在系统中角色的选项。我想通过添加undo和redo功能来简化此控件的使用，否则用户必须刷新页面以加载默认值，然后才能进行更改并保存更改。还有什么比使用数据属性更好的方法来管理
选择的状态呢

我在页面中添加了最小的HTML，并附加了一个JavaScript文件有没有办法简化JavaScript？

<select name="userRole" class="user-role" multiple="multiple">
    <option>administrator</option>
    <option>staff</option>
    <option>faculty</option>
    <option>angel</option>
    <option>moodle</option>
    <option>user</option>
</select>
<button class="undo">UNDO</button>
<button class="redo">REDO</button>

是的，代码可以简化。如中所述，数据变量存储在节点对象中。定义的变量还包括对节点对象的引用。因此，该守则将成为：

var sel = $('select.user-role'),
    changeRole = function() {
        var that = $(this);
        that.data()['undo'].push( that.val() );
    },

    undo = function() {
        var d = sel.data();
        if( d['undo'].length > 0 ) {
            d['redo'].push( d['undo'].pop() );
            sel.val( d['undo'].length ? d['undo'].slice(-1)[0] : [] );
        }
    },

    redo = function() {
        var d = sel.data();
        if( d['redo'].length > 0 ) {
            d['undo'].push( d['redo'].pop() );
            sel.val( d['undo'].length ? d['undo'].slice(-1)[0] : [] );
        }
    };

sel.on('change', changeRole).change();
$('button.undo').on('click', undo);
$('button.redo').on('click', redo);

var sel = $('select.user-role'),
    changeRole = function() {
        var that = $(this);
        that.data()['undo'].push( that.val() );
    },

    undo = function() {
        var d = sel.data();
        if( d['undo'].length > 0 ) {
            d['redo'].push( d['undo'].pop() );
            sel.val( d['undo'].length ? d['undo'].slice(-1)[0] : [] );
        }
    },

    redo = function() {
        var d = sel.data();
        if( d['redo'].length > 0 ) {
            d['undo'].push( d['redo'].pop() );
            sel.val( d['undo'].length ? d['undo'].slice(-1)[0] : [] );
        }
    };

sel.on('change', changeRole).change();
$('button.undo').on('click', undo);
$('button.redo').on('click', redo);