jQuery Mobile，在选项列表中选择“所有项目”

debugcn 发表于 Dev

迈克尔·纳什（Michael Nash）

好的，所以我在选择jQuery Mobile中的多项选择中的所有项目时遇到问题。

HTML：

<div data-role="page" id="one">
    <div data-role="content">
        <label for="sel">Select the Options</label>
        <select name="sel" id="sel" data-native-menu="false" multiple="multiple">
            <option value="1">Prod 1</option>
            <option value="2">Prod 2</option>
            <option value="3">Prod 3</option>
            <option value="4">Prod 4</option>
            <option value="5">Prod 5</option>
            <option value="6">Prod 6</option>
        </select>
        <div class="floatright" data-role="controlgroup" data-type="horizontal">
            <a href="#" id="selectall" data-role="button" data-icon="plus">Select All</a>
            <a href="#" id="deselectall" data-role="button" data-icon="minus">Deselect All</a>
        </div>
    </div>
</div>

Javascript：

function selectAll(select) {
    if (select == false) {
        $("#sel option:selected").removeAttr("selected");
    } else {
        $("#sel option").attr("selected", "true");
    }

    $("#sel").selectmenu("refresh", true);
}

$(document).ready(function () { 
    $('#selectall').click(function (event) {
        return selectAll(true);
    });

    $('#deselectall').click(function (event) {
        return selectAll(false);
    });
});

基本上可以在Chrome，Opera和Safari上运行。如果全选并取消全选，则使用IE和Firefox，再次尝试全选将不再起作用。我感觉这可能是jQuery，jQuery Mobile或Javascript问题，而不是我做错了什么。但是，如果我做错了事，我将不胜感激。

罗斯伯格·林哈雷斯（Rosberg Linhares）

您可以尝试以下方法：

function selectAll(select) {
    if (select == false) {
        $("#sel").val([]);
    } else {
        $("#sel option").prop("selected",  true);
    }

    $("#sel").selectmenu("refresh", true);
}

这是一个演示。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。