javascript - jQuery Mobile 中的全选/取消全选选项

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 移动多选只有一个更改事件。所以我能想到的唯一方法是存储所有品牌项目的状态，然后检查它是否已更改，然后全选或取消全选。这是你的 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);
})