在DeSelect Mobile中选择All / jQuery所有选项

Question

我正在尝试做一个select all，用jQuery移动取消所有选择。这似乎微不足道，但我一整天都在听这件事。看上去是这样的：

这是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移动多个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' );

不要忘记将-listbox扩展添加到您的select菜单id中，jqm自动添加该id。