twitter-bootstrap Bootstrap 多选不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19570027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Multiselect not working
提问by user385729
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!
我正在尝试使用多选 Bootstrap，我使用了以下代码，该代码也可在他们的网站 ( http://davidstutz.github.io/bootstrap-multiselect/) 上找到，它显示了多选按钮，并作为我已经选择了“奶酪和意大利辣香肠”的选项，它也已经选择了它们，但是每当我单击它时，它都不会打开要选择的列表！
<!-- 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.
提前谢谢了。
回答by auhorn
Try adding the bootstrap.js files (http://getbootstrap.com/javascript/). I missed those and it seems like these are required.
尝试添加 bootstrap.js 文件 ( http://getbootstrap.com/javascript/)。我错过了这些，似乎这些是必需的。
回答by pedram
This Can solve your problem. Sometimes jsfiddle.net not working properly.
这可以解决您的问题。有时 jsfiddle.net 无法正常工作。
So please make one html file and copy below lines in it. It will work for you.
因此，请制作一个 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>Please share if you have any issue.
如果您有任何问题，请分享。
回答by Bibin Chorickanpara
On IE8 i was having issues. When i altered bootstarp-multiselect.js line 223
在 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);
and on line 1468
并在线 1468
'class': option.class, to 'class': option['class'],
it worked
有效
回答by WebDev67
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>
回答by Yuval Herziger
I've had the same issue with the plugin and Internet Explorer, versions <= 10.
我在插件和 Internet Explorer 上遇到了同样的问题，版本 <= 10。
I have also managed to resolve this by adding the DOCTYPEtag at the beginning of my web page. This discovery was highly annoying, as IE sticks to XHTML.
我还设法通过在我的网页开头添加DOCTYPE标签来解决这个问题。这个发现非常烦人，因为 IE 坚持使用 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.
希望能帮助到你。
