由于多选向下，无法选择 select2 中的项目答案

【问题标题】：Can't select item in select2 because of multiple select lower down由于多选向下，无法选择 select2 中的项目
【发布时间】：2021-10-03 05:54:36
【问题描述】：

当我打开#s1 时，我无法选择选项 2 和 3。当我单击它们时，光标会进入 #s2。我该如何解决这个错误？

我认为它可能与 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>

【问题讨论】：

标签： html css twitter-bootstrap-3 jquery-select2

【解决方案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>

【讨论】：

感谢您的回答我解决了 z-index 的问题。具有多项选择的元素的 z-index 比其他元素大得多。我删除了它，现在它可以正常工作了。