Question

我正在尝试使用multiselect 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>

我错过了什么吗？

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

非常感谢提前。

Answer 1

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

Answer 2

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

所以请制作一个html文件并复制下面的行。它会对你有用。

＆＃13;

<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>

＆＃13;

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

Answer 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>

Answer 4

我对插件和Internet Explorer存在同样的问题，版本＆lt; = 10。

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

请确认您的网页以以下行开头：

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

希望它有所帮助。

Answer 5

在IE8上，我遇到了问题。当我改变bootstarp-multiselect.js第223行

时

$ ProgramA arg1 > output.txt
$ cat ./output.txt
$

到

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

和第1468行

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

它有效

Answer 6

检查控制台中是否有任何错误。对我来说是“未捕获的错误：Bootstrap 下拉列表需要 Popper.js”。

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js">

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

Bootstrap Multiselect不工作

6 个答案: