Question

select2中的单节和多节选择模式看起来不同。在单个窗口下面的一些窗口打开文本，但在多个窗口看起来像谷歌搜索栏没有任何文本。如何在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
});

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>

基本上，从选择元素中删除多个属性。

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

4 个答案: