Question

我们，我正在使用wenzhixin multiple select plugin进行多选下拉列表。

HTML看起来像这样：

<div class="fields">
     <select multiple="multiple" id="dd-items" class="multi-select-long" name="items" style="display: none;">
        <option value="1">Pen</option>
        <option value="2">Book</option>
        <option value="9">Pencils</option>
        <option value="4">Text books</option>
        <option value="8">Sharpners</option>
        <option value="5">Erasers</option>
        <option value="7">Colors</option>
    </select>
    <div class="ms-parent">
        <button class="ms-choice" type="button" style="width: 100%;">
            <span class="placeholder" style="width: 498px;">Select items</span>
            <div class="open"></div>
        </button>
        <div class="ms-drop" style="width: 100%; display: block;">
            <ul style="max-height: 150px;">
                <li>
                    <label>
                        <input type="checkbox" name="selectAll"> [All items]
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" value="1" name="selectItem"> Pen
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" value="2" name="selectItem"> Book
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" value="9" name="selectItem"> Pencils
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" value="4" name="selectItem"> Text books
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" value="8" name="selectItem"> Sharpners
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" value="5" name="selectItem"> Erasers
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" value="7" name="selectItem"> Colors
                    </label>
                </li>
            </ul>
        </div>
    </div>
</div>

我像这样调用multiselect函数：

jQuery('#dd-items').multipleSelect({
    selectAllText : 'All items',
    placeholder : 'Select item',
    maxHeight: 150,

    onCheckAll: function() {
        jQuery('#dd-items').siblings().find('.ms-choice').find('span').text('All items') ;
        jQuery('#dd-items').siblings().find('.ms-drop').find("input[type='checkbox'][name='selectItem']").prop('disabled',true);
    },
    onUncheckAll: function() {
        jQuery('#dd-items').siblings().find('.ms-drop').find("input[type='checkbox'][name='selectItem']").prop('disabled',false);
    },
    onClick: function(view) {
        if(jQuery('#dd-items').siblings().find('.ms-drop').find("input[type='checkbox'][name='selectItem']:checked").length == jQuery('#dd-items').siblings().find('.ms-drop').find("input[type='checkbox'][name='selectItem']").length)
        {
            jQuery('#dd-items').multipleSelect("checkAll");
        }
    }

});

现在您可以看到上面尽管代码工作正常但是OnCheckAll，OnUncheckAll和onClick的代码有点混乱。

有人可以建议一个更干净的方法吗？

P.S。我在页面上有多个多选下拉列表。 <div class="ms-parent">由插件生成。

Answer 1

试试这个，

JsFiddle

jQuery('#dd-items').multipleSelect({
    selectAllText : 'All items',
    placeholder : 'Select item',
    filter: true,
    maxHeight: 150,

    onCheckAll: function() {
        jQuery('#dd-items').multipleSelect("checkAll");
    },
    onUncheckAll: function() {
        jQuery('#dd-items').multipleSelect("uncheckAll");
    },
    onClick: function(view) {
        //jQuery('#dd-items').multipleSelect("checkAll");
    }

});

Answer 2

修改后的代码版本：

jQuery('#dd-items').multipleSelect({
    selectAllText: 'All items',
    placeholder: 'Select item',
    maxHeight: 150,
    onCheckAll: function () {
        jQuery('#dd-items ~ div span').text('All items');
        jQuery('#dd-items ~ div input[name=selectItem]').prop('disabled', true);
    },
    onUncheckAll: function () {
        jQuery('#dd-items ~ div input[name=selectItem]').prop('disabled', false);
    },
    onClick: function (view) {
        if (jQuery('#dd-items ~ div input[name=selectItem]:not(:checked)').length === 0) {
            jQuery('#dd-items').multipleSelect("checkAll");
        }
    }
});

基本上我已将所有.siblings().find()替换为~ div element。 ~选择器是一个CSS选择器，所以它应该更快。我尝试使用最短的选择器（例如~ div span而不是~ .ms-parent .ms-choice span.placeholder）。我也颠倒了if条件。 Demo here

更清洁的jQuery代码 - 嵌套div

2 个答案: