web-dev-qa-db-ja.com

Bootstrap複数選択ドロップダウンは表示されません

このブートストラップ-複数選択を独立したファイルで機能させることができますが、ポータルファイルに含めても、キャレットをクリックするとドロップダウンリストが表示されません。

私はすでにbootstrap-datepicker、datetimepicker、chosen、backbone.jsを使用しています

これはトリックを行うことになっている行です

$('.insightList').multiselect({
            selectAllText: true
});

'btn-group'にクラス 'open'を追加しない原因が何であるかを誰かが知っていますか？

！[クリックすると、オープンクラスを追加するかどうかはdivのbtn-groupクラスのみになります] [1]よろしくお願いします

javascriptjquerytwitter-bootstrapbootstrap-multiselect
5
Neha

私はあなたの問題を解決するためにjsbinを作成しました 作業デモ 。

enter image description here

    <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>

  <meta charset="utf-8">
  <title>Example by @Bneiluj</title>
</head>
<body>

  <select id="insightList" multiple="multiple">
    <optgroup label="Group 1">
      <option value="1-1">Option 1.1</option>
      <option value="2-1">Option 2.1</option>
      <option value="2-2">Option 2.2</option>
      <option value="2-3">Option 2.3</option>
    </optgroup>
  </select>

<script id="example">
$('#insightList').multiselect({
  enableClickableOptGroups: true
});
</script>

ご不明な点がございましたら、お気軽にお問い合わせください。

2
julien bouteloup

ドロップダウンのHTML構造が次のとおりであることを確認してください。

<select id="example-selectAllText" multiple="multiple" style="display: none;">
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
 <option value="4">Option 4</option>
 <option value="5">Option 5</option>
 <option value="6">Option 6</option>
</select>
<div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected" aria-expanded="false"><span class="multiselect-selected-text">None selected</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class="multiselect-item multiselect-all"><a tabindex="0" class="multiselect-all"><label class="checkbox"><input type="checkbox" value="multiselect-all"> Check all!</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1"> Option 1</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="2"> Option 2</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="3"> Option 3</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="4"> Option 4</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="5"> Option 5</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="6"> Option 6</label></a></li></ul></div>

$('#example-selectAllText').multiselect({
  includeSelectAllOption: true,
  selectAllText: 'Check all!'
});
1
Adnan Devops

これは、同じbootstrap multiselectを使用してビルドしようとしている単純な複数選択です。必要なjqueryとcssをすべてロードしましたが、それでも、提案されていないすべてのオプションを表示する選択ボックスが表示されます。上記のソリューション。

<select id="multi-select" name="field" multiple="multiple" >
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
 <!-- initialize multiselect -->
<script>
   $(document).ready(function() {
        $('#mult-select').multiselect();
    });
</script><!-- //ends-->
1
TaraGurung

の発生を確認してください

  • Bootstrap.js
  • Bootstrap-select.js
  • Bootstrap-multiselect.js

それらの1つが1回以上存在する場合、ドロップダウンは表示されません

1
Sanketsinh Rathod