如何使 select2 中的单个选择看起来像多个？

Question

select2 中的单节和多选模式看起来不同。在单个下面的某些窗口中打开文本，但在多个窗口中，它看起来像谷歌中的搜索栏，没有任何文本。如何在select2中做同样方式的单选选项？

Answer 1

其实你可以限制你的选择：

$('selector').select2({
  maximumSelectionLength: 1
});

Answer 2

您不是第一个尝试这样做的人。但现在不可用。

您可以查看此问题的某些变体：https://github.com/ivaynberg/select2/issues/1345

开发者对此问题的回答是：

这是在 4.1.0 版本中引入的（忘记标记它），所以 运气好的话，这应该会击中 Select2 核心或作为 未来几个月内的插件。

现在有4.0.3版本，等待新版本，希望他们真的这样做:)

Answer 3

我不确定您是否要求这样做。但我正在寻找这个，虽然迟到了，但我认为它会对某人有所帮助。

我使用过 SCSS。

在这里演示：https://jsfiddle.net/ufr4dw5j/

  .js-example-basic-single{
    width:200px;
  }  
    .select2{

                  &.select2-container{
                      top: -4px;
                      .select2-selection--single{
                          height: 50px;
                          border-radius:0;
                          &:focus{
                              outline: none;
                          }
                          .select2-selection__rendered{
                              line-height: 50px;
                          }
                          .select2-selection__arrow{
                              display:none;
                          }

                      }


                  }


              }

              .select2-container--default{
      &.select2-container--open{
          top:6px !important;
      }
      .select2-dropdown--below{
          top: -4px;
      }

      .select2-search--dropdown{
          padding: 0;
          .select2-search__field{
              height: 48px;
              border:0;
              border-bottom: 1px solid #aaa;
              padding:10px;
              box-sizing: border-box;

          }
      } 
  }

Answer 4

你的问题的解决方案不在脚本中的select2配置中，而是在html中。

你可能用这样的方式设置你的元素：

<select name="select" id="select" multiple="">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

而您正在寻找的是：

<select name="select" id="select">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

基本上，从 select 元素中删除 multiple 属性。