Question

我正在使用select2。我在类.select2的页面上有几个下拉列表，我将所有这些下拉列表初始化为select2，调用$('.select2').select2();这对于每个下拉列表都很有效，除了一个，这真的很奇怪。当我检查元素时，看起来所有内容都是使用上面的调用创建的，但我无法单击该元素使其下拉。下面是代码和一些图片：

HTML / PHP：

<div class="form-group">
  <label class="col-sm-12">Builder <small style="font-size: 55%;">(only NC)</small></label>
  <div class="col-sm-12">
    <select class="form-control select2" id="builder" name="builder">
      <option value="0"></option>
      <?php 
        for ($i=0;$i<$drpBuilderCount;$i++) {
          echo '<option value="'.$drpBuilderValue[$i].'">"'.$drpBuilderName[$i].'"</option>';
        }
      ?>
    </select>
  </div>
</div>

使用Javascript：

$('.select2').select2();

以下是检查时的代码：

<div class="form-group">
  <label class="col-sm-12">Builder<small>(only NC)</small></label>
  <div class="col-sm-12">
    <div class="select2-container form-control select2" id="s2id_builder">
      <a href="javascript:void(0)" class="select2-choice" tabindex="-1">  
        <span class="select2-chosen" id="select2-chosen-2"></span>
        <abbr class="select2-search-choice-close"></abbr>
        <span class="select2-arrow" role="presentation">
          <b role="presentation"></b>
        </span>
      </a>
      <label for="s2id_autogen2" class="select2-offscreen"></label>
      <input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-2" id="s2id_autogen2">
      <div class="select2-drop select2-display-none select2-with-searchbox">
        <div class="select2-search">
          <label for="s2id_autogen2_search" class="select2-offscreen"></label>
          <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-2" id="s2id_autogen2_search" placeholder="">
        </div>
        <ul class="select2-results" role="listbox" id="select2-results-2">   </ul>
      </div>
    </div>
    <select class="form-control select2" id="builder" name="builder" tabindex="-1" title="" style="display: none;">
      <option value="0"></option>
      <option value="1">"Add New"</option>
      <option value="2">"Curt Moran"</option>
      <option value="3">"Redstone Homes"</option>
      <option value="4">"Roots Construction"</option>
      <option value="5">"BDR Custom Homes"</option>
      <option value="6">"Heartland Builders LLC"</option>
      <option value="7">"Engelsma Homes"</option>                    
    </select>
  </div>
</div>

看起来它应该从我所知道的但是在视觉上我看到了：

正如您所看到的，右侧没有向下箭头，单击该元素无效。

以下是select2下拉列表中与正在初始化的类.select2在同一页面上的图片：

我需要构建器<select>进行初始化，就像所有其他选择标记一样。

Answer 1

对于对此问题感兴趣的任何人，都与使用空白选项标记有关。 select2不喜欢完全空白的选项标签，例如<option value="0"></option>甚至<option></option>我需要添加一个不间断的空格作为文本，以便使下拉列表完全初始化，如<option value="0"> </option>现在它按预期启动并且运行良好。

希望这可以帮助遇到这种情况的其他人。

select2初始化但无法点击

1 个答案: