我在模态中处理select2。我很久以前就开始研究它了。我已经阅读了一些帖子，但没有一个解决方案适合我。例如：
Select2 doesn't work when embedded in a bootstrap modal
Select2 not working inside bootstrap modal
代码是：
<div id="modal_sg" class="modal fade" style="overflow: hidden;">
<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">Please select a corporation</h4>
</div>
<div class="modal-body">
<form id="form_ag" class="form form-horizontal">
<input type="hidden" style="display:none;" value="32" name="id">
<div class="form-group">
<label for="id_sg" class="control-label col-md-3">Corporation</label>
<div class="col-md-9">
<select class="form-control select2" id="id_sg" name="id_sg">
<option value="89">a</option>
<option value="115">b</option>
<option value="84">c</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="bt_modal_sg">Save</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
使用Javascript：
$('.select2').select2(
{dropdownParent: $('#modal_sg')}
）;
的CSS：
.select2-container {
width: 100% !important;
padding: 0;
}
我正在使用select2-4.0.3。我不知道解决问题的热点，也不知道我的代码有什么问题。任何帮助将非常感激。提前谢谢！
答案 0 :(得分：2)
它不漂亮，但为我工作：
.select-in-modal+.select2-container {
width: 100% !important;
padding: 0;
z-index:10000;
}
.select2-container--open {
z-index:10000;
}
答案 1 :(得分：1)
这对我有效！
$('select').select2({
width: '100%'
});
答案 2 :(得分：0)
使用dropdownParent是要走的路。我成功地在Bootstrap对话框中使用了select2。但是从你的代码中可以清楚地了解了对话框系统的css属性。它是Bootstrap还是别的什么？
无论如何，您需要在Exception in thread "main" org.elasticsearch.action.search.SearchPhaseExecutionException: Failed to execute phase [query_fetch], all shards failed; shardFailures {[uVH-OgzjQfuUV8Bg_nViHQ][geo_ip][0]: SearchParseException[[geo_ip][0]: from[0],size[60]: Parse Failure [Failed to parse source [{"from":0,"size":60,"query":{"country":"Turkey"},"explain":true}]]]; nested: QueryParsingException[[geo_ip] [_na] query malformed, no field after start_object]; }{[uVH-OgzjQfuUV8Bg_nViHQ][geo_ip][1]: SearchParseException[[geo_ip][1]: from[0],size[60]: Parse Failure [Failed to parse source [{"from":0,"size":60,"query":{"country":"Turkey"},"explain":true}]]]; nested: QueryParsingException[[geo_ip] [_na] query malformed, no field after start_object]; }{[uVH-OgzjQfuUV8Bg_nViHQ][geo_ip][2]: SearchParseException[[geo_ip][2]: from[0],size[60]: Parse Failure [Failed to parse source [{"from":0,"size":60,"query":{"country":"Turkey"},"explain":true}]]]; nested: QueryParsingException[[geo_ip] [_na] query malformed, no field after start_object]; }{[uVH-OgzjQfuUV8Bg_nViHQ][geo_ip][3]: SearchParseException[[geo_ip][3]: from[0],size[60]: Parse Failure [Failed to parse source [{"from":0,"size":60,"query":{"country":"Turkey"},"explain":true}]]]; nested: QueryParsingException[[geo_ip] [_na] query malformed, no field after start_object]; }{[uVH-OgzjQfuUV8Bg_nViHQ][geo_ip][4]: SearchParseException[[geo_ip][4]: from[0],size[60]: Parse Failure [Failed to parse source [{"from":0,"size":60,"query":{"country":"Turkey"},"explain":true}]]]; nested: QueryParsingException[[geo_ip] [_na] query malformed, no field after start_object]; }
at org.elasticsearch.action.search.type.TransportSearchTypeAction$BaseAsyncAction.onFirstPhaseResult(TransportSearchTypeAction.java:237)
at org.elasticsearch.action.search.type.TransportSearchTypeAction$BaseAsyncAction$1.onFailure(TransportSearchTypeAction.java:183)
at org.elasticsearch.search.action.SearchServiceTransportAction$23.run(SearchServiceTransportAction.java:565)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
at java.lang.Thread.run(Thread.java:745)
选项中指定position:fixed的元素。它应该工作，至少在第4版（你使用什么版本的select2？）
答案 3 :(得分：0)
尽管，对于这个答案为时已晚；以下CSS应该可以解决问题：
span.select2-container.select2-container--default.select2-container--open {
z-index: 100003;
}
span.select2-selection.select2-selection--single {
outline: none;
}
它适用于我，并已于2020年9月24日在所有最新版本的Chrome，Firfox和Micorsoft Edge中进行了测试。
答案 4 :(得分：0)
<!DOCTYPE html>
<html lang="en">
<head>
<title>select2 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" data-backdrop="static">
<div id="modalSize" class="modal-dialog">
<div class="modal-header" style="background-color: white;color: #FFFFFF;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="modalTitle"></h3>
</div>
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<div id="showDialogInfoDiv">
<select id="select2insidemodal" class="select2 form-control" style="width: 100%;">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="AL">bangla</option>
<option value="WY">indo</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$('.select2').select2();
</script>答案 5 :(得分：-1)
将以下代码添加到javascript文件中：
"activeTab"