在jQuery Mobile中选择All / DeSelect All Options

Question

我尝试全部选择，使用jQuery Mobile取消全部选择。这似乎是微不足道的，但是我一整天都在聆听这一点。这就是它的样子：

这里是 JSFiddle 。

<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" selected>-All Brands-</option>
      <option value="1">Prod 1</option>
      <option value="2">Prod 2</option>
      <option value="3">Prod 3</option>
    </select>
  </div>
</div>

JavaScript的：

var arr = [];
$("#sel").live("change", function (event, ui) {
    var txt = $("#sel option:selected").text();
    if (txt.search("-All Brands-")) {

        $("#sel option").attr("selected", "selected");

    }
    else {
        $("#sel option:selected").removeAttr("selected");

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

我尝试了很多东西而且不能正确使用它。

Answer 1

好的，jquery mobile multi select只有一个更改事件，正如您可能阅读的那样。因此，我能想到的唯一方法是存储所有品牌项目的状态，然后检查它是否已更改，并选择或取消全选。这是你的JSFiddle的变化：

http://jsfiddle.net/Gm89P/7/

像这样：

var arr = [];
$("#sel").on("change", function (event, ui) {

    var allSelected = $("option:first", this).attr("selected");

    if (this.wasAllSelected && !allSelected) {
        $("#sel option:selected").removeAttr("selected");
        this.wasAllSelected = allSelected;
    }
    else if (!this.wasAllSelected && allSelected) {
        $("#sel option").attr("selected", "selected");
        this.wasAllSelected = allSelected;
    }
    $("#sel").selectmenu("refresh", true);
})

Answer 2

如果你选择操纵这些类，你可以像这样手动操作：

// For de-selecting

$( '#yourSelectMenuId'  ).val( '' ).change();
$( '#yourSelectMenuId-listbox ul li a' ).removeClass( 'ui-checkbox-on' );
$( '#yourSelectMenuId-listbox ul li a' ).addClass( 'ui-checkbox-off' );

不要忘记在jqm自动添加的选择菜单ID中添加-listbox扩展名。