web-dev-qa-db-ja.com

bootstrap multiselect-ワンクリックですべてのオプションを選択解除/選択解除します

Bootstrap multiselect を使用していますが、選択したオプションをすべてオフにするオプションを追加したいと思います。同じためのソリューションを提供してください。助けてくれてありがとう:)

jquerybootstrap-multiselect
8
2dar

_bootstrap-multiselect_のドキュメント here で説明されているように、.multiselect('refresh')メソッドを使用できます。

そのため、複数選択の選択リストの横にHTMLボタン/アイコンを追加し、次のコードを使用します。

_$("#reset_client").click(function(){
  $('option', $('#select_client')).each(function(element) {
    $(this).removeAttr('selected').prop('selected', false);
  });
  $("#select_client").multiselect('refresh');
});_
_<select name="clients[]" multiple="multiple" id="select_client" style="display: none;">
    <option value="multiselect-all"> Select all</option>
    <option value="1">Client 1</option>
    <option value="2">Client 2</option>
    <option value="3">Client 3</option>
    <option selected="selected" value="4">Client 4</option>
    <option selected="selected" value="5">Client 5</option>
    <option value="6">Client 6</option>
    <option selected="selected" value="7">Client 7</option>
    <option value="8">Client 8</option>
</select>

<input type="button" value="Reset" name="reset_clients" id="reset_client" class="reset_button" title="Clear Selection">_
13
Rajesh Omanakuttan

「すべて選択」ボタンを含めることができ、2回押すと「すべて選択解除」されます。これを行うには、このオプションを追加します。

includeSelectAllOption:true

これは、select要素に基づくbootstrap multiselectのすべてを無視します。

function multiselect_deselectAll($el) {
    $('option', $el).each(function(element) {
        $el.multiselect('deselect', $(this).val());
    });
}

$('.multiselect').each(function() {
    var select = $(this);
    multiselect_deselectAll(select);
});

「すべて選択」というオプションを手動で追加し、それが押されたときにリセット関数を呼び出すことができます。

参照： https://github.com/davidstutz/bootstrap-multiselect/issues/271

7
csga5000

「deselectAll」メソッドでこれを行うことができます。

$("select.multiselect").multiselect("deselectAll", false);

JQueryに「選択」のみをターゲットにするように指示することが重要です。そうしないと失敗します。これは、プラグインが同じクラス名を持つ何かを追加するためです。

@ L_7337-これは、リンク先の投稿の複製ではありません。この投稿は Bootstrap Multiselect を使用する場合にすべてのオプションを選択解除する方法についてです

もう1つの投稿は、通常の複数選択オプションから選択を解除する方法です。

よろしく

5
Thylle

以下のコードを使用して、multiselect bootstrap dropdownですべての選択項目を選択解除します

$("#ddlMultiSelectId").multiselect('clearSelection');
4
sushil suthar

以下の複数選択がある場合：

<div class="form-group">
      <label>Choose Skills</label>
      <select id="DDL" name="selValue" class="selectpicker form-control"  multiple>
               <option value="1">One</option>
               <option value="2">Two</option>
               <option value="3">Three</option>
        </select>
  </div>

次に、以下のjQueryを使用して、ボタンをクリックするだけですべてのオプションを選択解除できます。

$('#DDL').selectpicker("deselectAll", true).selectpicker("refresh");
1
Mr Nobody

これを試して：

$("#select_id option:selected").removeAttr("selected");
0
vohrahul

この問題はgitlabフォークで修正されました here

それは言う：

[すべて選択]を選択解除したときのトリガーonSelectAllを修正しました

あるいは、 issue＃752 が解決されるまで待つこともできます。たった一ヶ月前に育てられました。

0
Yevgeniy Afanasyev
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "container">
<div class="modal show" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal">×</button>
        <nav class="navbar navbar-default">
  <div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Channel(s)</a></li>
      <li><a href="#">Collaborator(s)</a></li>
    </ul>
  </div>
</nav>
      </div>
      <div class="modal-body">
        <form>              <div class="form-check row">
            <label class="col-sm-2 form-check-label" for="ListeningProject">Listening Project</label>
              <div class="col-sm-10">
                <input class="form-check-input" id="ListeningProject" value="" type="checkbox" />
              </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-2 form-check-label" for="AccountName">Select:</label>
            <div class="col-sm-10">
                <select class="form-control" id="AccountName" multiple="" required="">
                  <option>A Company</option>
                  <option>B Copany</option>
                  <option>C Company</option>
                  <option>D Company</option>
                </select>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>
<script>
$("#ListeningProject").change(function(){  //"select all" change
    var status = this.checked; // "select all" checked status
    $('#AccountName option').prop('selected', status);
});
</script>
</body>
</html>
0
Ashutosh gupta

あなたはこのようにすることができます、それは私のために働きます：

$('#dropdownID').val([]).multiselect('refresh')
0
Suresh Kamrushi