select2 不显示数据

Question

我需要使用 multiselect 所以我想到了使用 select2 标签。但是我遇到了一个问题.. 我已经从带有值的 nette 渲染了 multiselect.. 当我查看 html 代码时，我可以看到所有选项及其值.. 但是当我启用 select2 对于那个 select 它说 'No results found' 但代码中仍然有数据.. 我也想使用标签，而且这也不起作用.. 任何可能的解决方案伙计们？谢谢

我正在像这样启用 select2 - select 有 class 'multiple-regions'：

<script>
        $(document).ready(function () {
            $('.multiple-regions').select2({
                tags: true
            });
        });
</script>

PS：我在bootstrap和select2之前包含了jquery。

编辑：发布HTML（我现在使用来自nette的表单组件，但当我使用原始HTML时它是一样的）

{form filterRoutesForm}
  <div class="row" style="padding: 0 1em;">
    <div class="col-md-5">
      <div class="form-group">
        {label date class=>"form-control-label"/}
        {input date class=>"form-control daterange-routes"}
      </div>
    </div>

    <div class="col-md-5">
      <div class="form-group">
        {label region class=>"form-control-label"/}
        {input region class=>"form-control multiple-regions"}
      </div>
    </div>

    <div class="col-md-2">
      {input search class=>"btn btn-primary form-control", style=>"margin-top: 35px;"}
    </div>
  </div>
{/form}

这是原始 HTML 的相同示例：

<select name="region[]" multiple="multiple" class="form-control multiple-regions">
  <option value="all">všechny kraje</option>
  <option value="1">Praha</option>
  <option value="2">Střední Čechy</option>
  <option value="3">Jih a západ Čech</option>
  <option value="4">Severní Čechy</option>
  <option value="5">Východní Čechy</option>
  <option value="6">Jižní Morava</option>
  <option value="7">Severní Morava</option>
  <option value="8">Bratislava</option>
  <option value="9">Západní Slovensko</option>
  <option value="0">Východní Slovensko</option>
</select>

顺便说一句，我也尝试在 'data' 属性和 select2 中添加数据作为数组，但效果仍然相同 - 未找到结果

Answer 1

您需要添加 select2.css、select2.js 以及 jquery（如果尚未完成），请添加 multiple，这几乎就是您所需要的。

$(document).ready(function () {
   $('.multiple-regions').select2({
      tags: true,
      width: '100%'
   });
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />

<select name="region[]" class="form-control multiple-regions" multiple>
  <option value="all">všechny kraje</option>
  <option value="1">Praha</option>
  <option value="2">Střední Čechy</option>
  <option value="3">Jih a západ Čech</option>
  <option value="4">Severní Čechy</option>
  <option value="5">Východní Čechy</option>
  <option value="6">Jižní Morava</option>
  <option value="7">Severní Morava</option>
  <option value="8">Bratislava</option>
  <option value="9">Západní Slovensko</option>
  <option value="0">Východní Slovensko</option>
</select>

如果需要，您最终可以添加 closeOnSelect: false 作为 select2 参数，以防止它在每个 select 上关闭，这对多个 select 离子很有用。

Answer 2

休息几天后我解决了它。问题出在外部 .js 文件中 - 我的同事在其中定义了 .select2 样式，其中 select2 使用 defaulty ..所以当我想在脚本中声明 select2 时，他的样式重写了它然后它没有数据..谢谢你所做的一切。赛亚

select2 不显示数据

select2 doesnt show data

jquery-select2

nette