如何在select2中进行单个选择看起来像多个选择？

Question

select2中的单节和多种选择模式看起来有所不同。在下面的单个窗口中，打开带有文本的窗口，但是在多个窗口中，它看起来像是Google中没有任何文本的搜索栏。如何使select2中的单选选项相同？

Answer 1

您不是第一个尝试执行此操作的人。但是它现在不可用。

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

开发人员对此问题的答案是：

此版本已在4.1.0版本中引入（忘了对其进行标记），因此运气好的话，这应该打入Select2核心，或者作为插件在接下来的几个月内。

现在它具有版本4.0.3，请等待新版本发布，并希望他们真正做到这一点：）

Answer 2

我不确定您是否要求这个。但是我一直在寻找这个东西，尽管迟了，但它认为这将对某人有所帮助。

我使用过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 3

实际上您可以限制选择：

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