9

我正在尝试使用多选引导程序，我使用了以下代码，该代码也可以在他们的网站上找到（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 回答
2

这可以解决你的问题。有时 jsfiddle.net 无法正常工作。

因此，请制作一个 html 文件并在其中复制以下行。它会为你工作。

<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
        rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#lstFruits').multiselect({
                includeSelectAllOption: true
            });
           
        });
    </script>
    <select id="lstFruits" multiple="multiple">
       <option value="cheese" selected>Cheese</option>
        <option value="tomatoes">Tomatoes</option>
        <option value="mozarella">Mozzarella</option>
        <option value="mushrooms" selected>Mushrooms</option>
        <option value="pepperoni" selected>Pepperoni</option>
        <option value="onions">Onions</option>
    </select>  
</body>

如果您有任何问题，请分享。

于 2015-08-10T13:44:44.510 回答
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。

我还设法通过在网页开头添加DOCTYPE标记来解决此问题。这个发现非常烦人，因为 IE 坚持使用 XHTML。

请验证您的网页是否以以下行开头：

<!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 回答
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 回答
0

检查控制台中的任何错误。对我来说是" Uncaught Error: Bootstrap dropdown require Popper.js"。

<scriptsrc = https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>

在解决 bootstrap.min.js 问题后添加此行。

于 2021-08-10T08:40:27.700 回答