Question

我不喜欢select属性的multiple元素，prop('type') select-multiple的元素。人们总是强迫将键盘键与鼠标点击组合在一起以便选择选项。另外，在移动设备上进行选择并不容易。

但是，有一个Vendor的产品使用此表单字段，其中有很多选项代表用户在系统中的角色。我想通过添加撤消和重做功能来更轻松地使用此控件，否则用户必须刷新页面以加载默认值，然后再进行保存变化。还有什么更好的方法来管理select的状态而不是使用数据属性。

我在页面中添加了最少的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>

JavaScript：

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

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

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

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

Answer 1

是的，代码可以简化。如this excellent post 中所述，数据变量存储在节点对象中。定义的变量也是对节点对象的引用。因此代码将成为：

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);

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

1 个答案: