Bootstrap Multiselect not working

问题

I'm trying to use multiselect Bootstrap, I used the following code which is also available in their website too at (http://davidstutz.github.io/bootstrap-multiselect/), it shows the button for multi-select and as I already put the selected option for "cheese and pepperoni", it has already selected them too, but whenever I click on it, it does not open the list to choose!

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

Am I missing something?

Also if you think my question is not clear please let me know which part you need more clarification.

Many thanks in advance.

回答1:

Try adding the bootstrap.js files (http://getbootstrap.com/javascript/). I missed those and it seems like these are required.

回答2:

This Can solve your problem. Sometimes jsfiddle.net not working properly.

So please make one html file and copy below lines in it. It will work for you.

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

Please share if you have any issue.

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

回答4:

I've had the same issue with the plugin and Internet Explorer, versions <= 10.

I have also managed to resolve this by adding the DOCTYPE tag at the beginning of my web page. This discovery was highly annoying, as IE sticks to XHTML.

Please verify that your web page begins with the following line:

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

Hope it helps.

回答5:

On IE8 i was having issues. When i altered bootstarp-multiselect.js line 223

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

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

and on line 1468

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

it worked

来源：https://stackoverflow.com/questions/19570027/bootstrap-multiselect-not-working

标签

twitter-bootstrap

twitter-bootstrap-3

multi-select