引导多选不起作用答案

【问题标题】：Bootstrap Multiselect not working引导多选不起作用
【发布时间】：2013-11-03 09:39:06
【问题描述】：

我正在尝试使用多选 Bootstrap，我使用了以下代码，该代码也可以在他们的网站 (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>

我错过了什么吗？

另外，如果您认为我的问题不清楚，请告诉我您需要进一步澄清的部分。

非常感谢。

【问题讨论】：

你搞清楚了吗？我也有同样的问题

标签： twitter-bootstrap twitter-bootstrap-3 multi-select

【解决方案1】：

尝试添加 bootstrap.js 文件 (http://getbootstrap.com/javascript/)。我错过了这些，似乎这些是必需的。

【讨论】：

完美！有时我们会错过基础知识。我忘了添加这个核心引导文件，这就是它不起作用的原因。非常感谢:)
只是关于我遇到的一个问题的注释。如果由于某种原因 boostrap.js 文件在您的页面上包含两次（它可能发生，因此确实发生了），多选不会下拉。

【解决方案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>

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

【讨论】：

【解决方案3】：

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>

【讨论】：

感谢您的回答，但还是不行；你在你的电脑或 jsfiddle 上试过了吗？
您的 JSFIDDLE 也不起作用！你把所有的东西都包括进去了吗？
你好，请通过它，我已经解决了你的问题。 jsfiddle.net/rajeshmpanchal/q3znu726/1

【解决方案4】：

插件和 Internet Explorer 版本

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

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

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

希望对你有帮助。

【讨论】：

【解决方案5】：

在 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'],

成功了

【讨论】：

【解决方案6】：

检查控制台中的任何错误。对我来说是" 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 问题后添加此行。

【讨论】：