logo标签列表

Bootstrap多选框无法正常工作。

twitter-bootstraptwitter-bootstrap-3multi-select
11

我正在尝试使用multiselect Bootstrap，我使用了以下代码，这个代码也可以在它们的网站上找到(http://davidstutz.github.io/bootstrap-multiselect/)。这段代码显示了多选按钮，并且我已经将“cheese and pepperoni”选项选中了，但是每当我点击它时，它都不会打开选择列表！

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

我是否漏掉了什么？

另外，如果您认为我的问题不清楚，请让我知道需要更多澄清的部分。

非常感谢您提前的帮助。

你最终解决了吗？我也遇到了同样的问题。 - ryndshn
6个回答
16
完美！有时候我们会忽略基础知识。我忘记添加了这个核心引导文件，所以它才不起作用。非常感谢 :) - Rahul Dole
4
关于一个我遇到的问题，提醒一下大家。如果出现了这种情况，你的页面上包含了两次bootstrap.js文件（这种情况可能会发生），多选下拉菜单将无法下拉。 - OutstandingBill
最新版本中对于Bootstrap 5无法正常运行，但在Bootstrap 3中可以。请问是否有其他帮助？链接如下： https://jsfiddle.net/q8yd0Ljp/ - Manoj Kumar
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>

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

1

我在IE8上遇到了问题。当我修改bootstarp-multiselect.js的223行时

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

to 

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

在第1468行。
'class': option.class, to  'class': option['class'],

它起作用了

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>
谢谢你的回答，但它仍然不起作用；你在你的电脑或jsfiddle上试过吗？ - user385729
3
你的 JSFIDDLE 也没能正常工作！你是否已经包含了所有需要的内容？ - user385729
嗨，请查看一下，我已经解决了你的问题。 https://jsfiddle.net/rajeshmpanchal/q3znu726/1/ - Pedram
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">

希望这有所帮助。
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问题后，添加此行代码。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接