17

私はブートストラップ 2.3.2 を使用しており、要素をドロップダウン メニューのように実装したいと考えています。github に解決策があります: https://github.com/silviomoreto/bootstrap-select

私のコード:

<select class="selectpicker">
    <option>1</option>
    <option>2</option>
</select>

<script type="text/javascript">
    $( function() {
       $('.selectpicker').selectpicker();
    })
</script>

うまくいきません。しかし、私が入力すると

$('.selectpicker').selectpicker();

Chrome DevTools のコンソールで - ドロップダウンへの変更を選択すると機能します。

4

7 に答える 7

14

1年後、私は同じ問題を抱えていました。これは私にとってはうまくいきました：

1-所有者サイトでzipファイルをダウンロードしました-http : //silviomoreto.github.io/bootstrap-select/

2-CSS、head タグ内 ->2files

<link rel="stylesheet" type="text/css" href="yourPath/silviomoreto-bootstrap-select-83d5a1b/dist/css/bootstrap-select.css">
<link href="yourPath/bootstrap.min.css" rel="stylesheet">

3-js ファイル、末尾の close body タグの前。

<body>
<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select> 

<script type="text/javascript" src="yourPath/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="yourPath/bootstrap.min.js"></script>
<script type="text/javascript" src="yourPath/silviomoreto-bootstrap-select-83d5a1b/dist/js/bootstrap-select.js"></script>

<script>
  $(document).ready(function () {
    $('.selectpicker').selectpicker();
  });
</script>
</body>
于 2014-12-09T22:32:04.863 に答える
2

コードをロードする前にbootstrap-select.jsorが含まれていることを確認してください。bootstrap-select.min.js

<script src="path-to/js/bootstrap-select.min.js"></script>
于 2014-01-23T21:42:53.827 に答える
2

うまくいかないのにはいくつかの理由があります。

理由 1:
bootstrap-select.css の読み込みに時間がかかる場合、既に読み込まれている $(document).ready(function () {}) などの jquery コマンドは関数を認識しないため、エラーがスローされます。

解決策: したがって、これを克服する $('your selector').selectpicker(); には、jquery の準備ができている関数を使用せずに、html コードの末尾にある script タグの間で譲歩するだけです...確かに機能します

于 2020-06-23T09:40:18.250 に答える
0 
$(document).ready(function() {
    $('.selectpicker').selectpicker({
        style: 'btn-default',
        size: false
    });
});

同じ問題があります。これ（デフォルトのサイズを設定）が役に立ちました。設定メニューがないと表示されません。

The size option is set to 'auto' by default. When size is set to 'auto', the menu always opens up to show as many items as the window will allow without being cut off. Set size to false to always show all items. The size of the menu can also be specifed using the data-size attribute. http://silviomoreto.github.io/bootstrap-select/

追加: また、ブートストラップ バージョンについても忘れないでください。検索したところ、このプラグインは公式ページで 2.3.2 ブートストラップ バージョンで動作し、そのようなリンクがあることがわかりました。だから私もトラブルになると思います。

于 2014-08-11T19:54:30.567 に答える
-9

これを削除すると、これでうまくいきました

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

すっげー変…

于 2015-06-20T22:05:13.250 に答える