无法在 select2 中选择项目，因为向下有多个选择

Question

当我打开#s1时，我不能选择选项2 &3.当我点击它们时，光标进入#s2。我如何修复这个bug?

我想它可能是与z-index的东西，但我试了，它没有帮助。

<form action="" class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label" data-ltext=""></label>
<div class="col-md-4">
<select name="s1" id="s1" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" data-ltext=""></label>
<div class="col-md-4">
<input class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" data-ltext=""></label>
<div class="col-md-4">
<select name="s2" id="s2" class="form-control" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</form>
<script type="text/javascript">
$(function() {
$('#s1').select2();
$('#s2').select2();
});
</script>

Answer 1

对我来说似乎工作得很好。也许是您导入<link>和<script>标签的顺序导致了这个问题?

除了使用您提供的代码之外，我实际上没有做任何事情。我有一些问题，我不小心在jQuery之前保留了select2的链接，这导致了一些错误，所以它可能是你有一个类似的问题

$(function() {
$('#s1').select2();
$('#s2').select2();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<form action="" class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label" data-ltext=""></label>
<div class="col-md-4">
<select name="s1" id="s1" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" data-ltext=""></label>
<div class="col-md-4">
<input class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" data-ltext=""></label>
<div class="col-md-4">
<select name="s2" id="s2" class="form-control" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</form>