CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Muskan
Muskan

Reputation: 1

I am using bootstrap to display multiselect drop down, but it is showing simple dropdown

I have imported all required js and css files. But multselect dropdown with checkbox is not working. Output is coming simple without dropdown and checkbox. Please suggest me on this.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect/bootstrap-multiselect.css" type="text/css"></link>
<script type="text/javascript" src="js/bootstrap-multiselect/bootstrap-multiselect.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#multi-select-demo').multiselect();
    });
</script>
<select id="multi-select-demo" multiple="multiple">
   <option value="jQuery">jQuery tutorial</option>  
   <option value="Bootstrap">Bootstrap Tips</option>
   <option value="HTML">HTML</option>
   <option value="CSS">CSS tricks</option>
   <option value="angular">Angular JS</option>
  </select>
</body>

Upvotes: 0

Views: 1020

Answers (2)

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

Proper reference to the CDN on the multi-select

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"></link>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#multi-select-demo').multiselect();
    });
</script>
<select id="multi-select-demo" multiple="multiple" >
   <option value="jQuery">jQuery tutorial</option>  
   <option value="Bootstrap">Bootstrap Tips</option>
   <option value="HTML">HTML</option>
   <option value="CSS">CSS tricks</option>
   <option value="angular">Angular JS</option>
  </select>

Here is one CDN of it.

Here is a fiddle to show it working https://jsfiddle.net/MarkSchultheiss/1gn2w0ub/

Upvotes: 1

Ali
Ali

Reputation: 558

<select id="multi-select-demo" multiple="multiple" style="display: none;">
  <optgroup label="Mathematics">
    <option value="analysis">Analysis</option>
    <option value="algebra">Linear Algebra</option>
    <option value="discrete">Discrete Mathematics</option>
    <option value="numerical">Numerical Analysis</option>
    <option value="probability">Probability Theory</option>
  </optgroup>
  <optgroup label="Computer Science">
    <option value="programming">Introduction to Programming</option>
    <option value="automata">Automata Theory</option>
    <option value="complexity">Complexity Theory</option>
    <option value="software">Software Engineering</option>
  </optgroup>
</select>

$(document).ready(function() {
  $('#multi-select-demo').multiselect();
});

JsFiddle

Upvotes: 0

Related Questions