9

私は複数選択ブートストラップを使用しようとしています。次のコードを使用しました。これは、Web サイトでも利用できます ( http://davidstutz.github.io/bootstrap-multiselect/ )。複数選択のボタンが表示され、次のように表示されます。 「チーズとペパロニ」の選択済みオプションを既に配置しましたが、それらも既に選択されていますが、クリックするたびに選択するリストが開きません!

<!-- Include the plugin's CSS and JS: -->
<script src="http://code.jquery.com/jquery.js"></script>    
<script type="text/javascript" src="<?php echo base_url('bootstrap/js/bootstrap-multiselect.js'); ?>"></script>

<link href="<?php echo base_url('bootstrap/css/bootstrap-multiselect.css'); ?>" rel="stylesheet" type="text/css">    
<link href="<?php echo base_url('bootstrap/css/bootstrap.min.css'); ?>" rel="stylesheet" type="text/css">                  
<script type="text/javascript" src="<?php echo base_url('bootstrap/js/bootstrap.min.js'); ?>"></script>    

<!-- Build your select: -->
<select class="multiselect" multiple="multiple" name="my-select[]" id="my-select">
    <option value="cheese" selected>Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni" selected>Pepperoni</option>
    <option value="onions">Onions</option>
</select>

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

何か不足していますか？

また、私の質問が明確ではないと思われる場合は、さらに明確にする必要がある部分をお知らせください。

よろしくお願いします。

4

6 に答える 6

15

bootstrap.js ファイル ( http://getbootstrap.com/javascript/ ) を追加してみてください。私はそれらを見逃しました。これらが必要なようです。

于 2014-02-21T16:16:21.377 に答える
1

IE8では問題がありました。bootstarp-multiselect.js の 223 行目を変更したとき

this.$select.wrap('<span class="hide-native-select">').after(this.$container);

に

this.$select.wrap('<span class="hide-native-select"></span>').after(this.$container);

そして1468行目

'class': option.class, to  'class': option['class'],

出来た

于 2016-08-08T16:39:41.077 に答える
1 
Try this: Add this where build your select is...
           <div class="input-group btn-group">
                <span class="input-group-addon"><b class="glyphicon glyphicon-list-alt"></b></span>
                <select id="example6" multiple="multiple" style="display: none;">
                <option value="cheese">Cheese</option>
                <option value="tomatoes">Tomatoes</option>
                <option value="mozarella">Mozzarella</option>
                <option value="mushrooms">Mushrooms</option>
                <option value="pepperoni">Pepperoni</option>
                <option value="onions">Onions</option>
                </select>

                <div class="btn-group">
                <button type="button" class="multiselect dropdown-toggle btn" data-toggle="dropdown" title="None selected" style="width: auto;">None selected <b class="caret"></b></button>
                <ul class="multiselect-container dropdown-menu">
                <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="cheese"> Cheese</label></a></li>
                <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="tomatoes"> Tomatoes</label></a></li>
                <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="mozarella"> Mozzarella</label></a></li>
                <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="mushrooms"> Mushrooms</label></a></li>
                <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="pepperoni"> Pepperoni</label></a></li>
                <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="onions"> Onions</label></a></li></ul>
                </div>
                </div>
于 2013-10-25T16:36:59.587 に答える
1

プラグインと Internet Explorer のバージョン <= 10 で同じ問題が発生しました。

Web ページの先頭にDOCTYPEタグを追加することで、これを解決することもできました。IE は XHTML に固執しているため、この発見は非常に煩わしいものでした。

Web ページが次の行で始まっていることを確認してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

それが役に立てば幸い。

于 2014-01-12T14:23:59.370 に答える