twitter-bootstrap Bootstrap 下拉菜单在模态内不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29955732/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 22:36:18 来源:igfitidea点击:
Bootstrap dropdown doesn't work inside modal
提问by Rami Hussein
Is there a known reason why dropdown would not work inside a modal? I am using rails 4 and the dropdown works perfectly fine all over the app except for the modal. Here is how it is rendered
下拉菜单在模态中不起作用是否有已知原因？我正在使用 rails 4 并且下拉菜单在整个应用程序中都非常好，除了模态。这是它的呈现方式
I suspect this might be an issue with javascript, I have tried changing the order of including javascripts in my application.js but nothing would work. Here is my application.js:
我怀疑这可能是 javascript 的问题，我曾尝试更改在 application.js 中包含 javascripts 的顺序，但没有任何效果。这是我的 application.js：
//= require bootstrap
//= require jquery/jquery-2.1.1.js
//= require jquery_ujs
//= require turbolinks
//= require cloudinary
//= require jquery.turbolinks
//= require slimscroll/jquery.slimscroll.min.js
//= require bootstrap-sprockets
Has anyone ran into this before? is there a fix for this? I tried searching all over but couldn't find any relevant solution
有没有人遇到过这个问题？有没有办法解决这个问题？我尝试到处搜索，但找不到任何相关的解决方案
EDIT: The modal code
编辑：模态代码
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
`enter code here`<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Group</h4>
</div>
<div class="modal-body">
<div class="form-group"><label>Class name</label> <input type="name" placeholder="Choose a name for your group" class="form-control"></div>
<div class="form-group"><label>Class name</label> <input type="desc" placeholder="Add a description for your group" class="form-control"></div>
<div class="form-group">
<label class="font-noraml">Select</label>
<div class="input-group">
<select data-placeholder="Select a grade..." class="chosen-select" style="width:350px;" tabindex="2">
<option value="">Select</option>
<option value="Prekindergarten">Prekindergarten</option>
<option value="Kindergarten">Kindergarten</option>
<option value="1st">1st</option>
<option value="2nd">2nd</option>
<option value="3rd">3rd</option>
<option value="4th">4th</option>
<option value="5th">5th</option>
<option value="6th">6th</option>
<option value="7th">7th</option>
<option value="8th">8th</option>
<option value="9th">9th</option>
<option value="10th">10th</option>
<option value="11th">11th</option>
<option value="12th">12th</option>
<option value="Higher Education">Higher Education</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Thanks
谢谢
回答by dekkard
I assume you use the jQuery.Chosen plugin. Here's the code:
我假设您使用 jQuery.Chosen 插件。这是代码：
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function(e) {
console.debug('modal shown!');
$('.chosen-select', this).chosen({width: "350px"});
});
$("#myModal").modal('show');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Add Group
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>
Class name
</label>
<input type="name" placeholder="Choose a name for your group" class="form-control">
</div>
<div class="form-group">
<label>
Description
</label>
<input type="desc" placeholder="Add a description for your group" class="form-control">
</div>
<div class="form-group">
<label class="font-noraml">
Select
</label>
<div class="input-group">
<select data-placeholder="Select a grade..." class="form-control chosen-select" style="width:350px;" tabindex="2">
<option value="">
</option>
<option value="Prekindergarten">
Prekindergarten
</option>
<option value="Kindergarten">
Kindergarten
</option>
<option value="1st">
1st
</option>
<option value="2nd">
2nd
</option>
<option value="3rd">
3rd
</option>
<option value="4th">
4th
</option>
<option value="5th">
5th
</option>
<option value="6th">
6th
</option>
<option value="7th">
7th
</option>
<option value="8th">
8th
</option>
<option value="9th">
9th
</option>
<option value="10th">
10th
</option>
<option value="11th">
11th
</option>
<option value="12th">
12th
</option>
<option value="Higher Education">
Higher Education
</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Add Group
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>
Class name
</label>
<input type="name" placeholder="Choose a name for your group" class="form-control">
</div>
<div class="form-group">
<label>
Description
</label>
<input type="desc" placeholder="Add a description for your group" class="form-control">
</div>
<div class="form-group">
<label class="font-noraml">
Select
</label>
<div class="input-group">
<select data-placeholder="Select a grade..." class="form-control chosen-select" style="width:350px;" tabindex="2">
<option value="">
</option>
<option value="Prekindergarten">
Prekindergarten
</option>
<option value="Kindergarten">
Kindergarten
</option>
<option value="1st">
1st
</option>
<option value="2nd">
2nd
</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>Reference: chosen with bootstrap 3 not working properly
回答by Aleksandr Larionov
your code works in my modal I assume there is something wrong with styles, not with JS check styles
你的代码在我的模式下工作我认为样式有问题，而不是 JS 检查样式
