Menu
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.
378
For windows: Hold down the control (ctrl) button to select multiple options. For Mac: Hold down the command button to select multiple options.
Bootstrap Multiselect is a jQuery based plugin that allows users to tick multiple options from a standard Bootstrap select. Its implementation is quite simple, and in exchange brings a lot of UX value. Examples of Bootstrap Multiselect use: Ingredient choice within a pizza delivery system.
Try adding the bootstrap.js files (http://getbootstrap.com/javascript/). I missed those and it seems like these are required.
165
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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
