• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1040
  • Last Modified:

bootstrap multiselect - what is rong with this script ?

it is not working, i just copied an example, what' wrong ? the options are not showing

   <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>     </title>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">	
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     	
         <script src="js/bootstrap-multiselect.js"></script>     
    <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" media="screen"/>
 	        
    </head>
    <body>
            

            
                        
    
        <div class="panel-group" id="example-collapse-accordion">
          <div class="panel panel-default" style="overflow:visible;">
            <div class="panel-heading">
            <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#example-collapse-accordion" href="#example-collapse-accordion-one">
            Bootstrap Multiselect
            </a>
            </h4>
            </div>
            <div id="example-collapse-accordion-one" class="panel-collapse collapse in">
            <div class="panel-body">
                <select id="example-collapse" multiple="multiple">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                    <option value="5">Option 5</option>
                    <option value="6">Option 6</option>
                  </select>
              </div>
            </div>
            </div>
    </div>
    
    
    
   
   <script>


    $(function() {	

        $('#example-collapse').multiselect(
        	{
     	    	   includeSelectAllOption: true,
     	    	   maxHeight: 200,
     	    	   enableClickableOptGroups: true,
     	    	   enableFiltering: true
     	    	   }    

        		
                ); 
	 
	  		
		});	
		
	       
  </script> 
  
 </body>
 </html>   

Open in new window

0
sniger
Asked:
sniger
  • 3
  • 2
1 Solution
 
GaryCommented:
Probably because these are not found

js/bootstrap-multiselect.js
and
css/bootstrap-multiselect.css
0
 
snigerAuthor Commented:
they are found, have you even bother to check ?
0
 
GaryCommented:
Well you don't have the Bootstrap js file

<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Open in new window


And get rid of the attitude.
0
 
snigerAuthor Commented:
i don't have attitude,

I added the bootstrap  , same thing
   <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>     </title>
        <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">	
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
     	
         <script src="js/bootstrap-multiselect.js"></script>     
    <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" media="screen"/>
 	        
    </head>
    <body>
        <div class="panel-group" id="example-collapse-accordion">
          <div class="panel panel-default" style="overflow:visible;">
            <div class="panel-heading">
            <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#example-collapse-accordion" href="#example-collapse-accordion-one">
            Bootstrap Multiselect
            </a>
            </h4>
            </div>
            <div id="example-collapse-accordion-one" class="panel-collapse collapse in">
            <div class="panel-body">
                <select id="example-collapse" multiple="multiple">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                    <option value="5">Option 5</option>
                    <option value="6">Option 6</option>
                  </select>
              </div>
            </div>
            </div>
    </div>
    
    
    
   
   <script>


    $(function() {	

        $('#example-collapse').multiselect(
        	{
     	    	   includeSelectAllOption: true,
     	    	   maxHeight: 200,
     	    	   enableClickableOptGroups: true,
     	    	   enableFiltering: true
     	    	   }    

        		
                ); 
	 
	  		
		});	
		
	       
  </script> 
  
 </body>
 </html>

Open in new window

0
 
GaryCommented:
Needs to be after the jQuery library, not before it.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now