如何使用 select2.js答案

【问题标题】：How to Use select2.js如何使用 select2.js
【发布时间】：2013-01-11 14:05:56
【问题描述】：

我想添加一个表单域，它可以自动填充文本并可以使用多个选项卡（类似于 fb）。我发现 select2.js 可以帮助我做到这一点，但是当我将多个属性设置为 true 时，我在使用它时遇到了问题。如果我添加多个：true，则页面将其显示为正常选择。

我发现 select2 页面上的文档令人困惑。

我是他们所有人的新手，请帮帮我。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>          
<script type="text/javascript" src="select2.js"></script>          

 <link href="select2.css" rel="stylesheet"/>
    <script src="select2.js"></script>
    <script>
        $(document).ready(function() { 
        $("#e1").select2([multiple: true]);
        });
    </script>

</head>
<body>
<input type="button" id="123">click
</br>
<input type="hidden" id="1234">
<select id="e1">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>

        <option value="WY">Wyoming</option>
    </select>

</body>
</html>

【问题讨论】：

这里是示例教程youtu.be/gTNQOxvuUv0

标签： jquery html jquery-chosen jquery-select2

【解决方案1】：

仅在标记中添加属性“multiple”和宽度。

<select multiple id="e1" style="width:300px">

和 js 一样：

$(document).ready(function() { 
 $("#e1").select2();
});

在此处查看小提琴：http://jsfiddle.net/marcusasplund/jEADR/2/

附注；您在问题中发布的代码中加载了 2 次 select2.js。

【讨论】：

这在 CakePHP 上对我有用。花了很长时间试图弄清楚他们在 select2 git 上发挥了什么魔力......谢谢。
@mattblang 你是对的，也许“仅在标记中”有点令人困惑。在 css 中指定宽度可能会更好。可能是，因为您必须将 select2 构造的容器的宽度设置为：.select2-container-multi { width: 300px } 然后，如果在目标选择元素上根本没有指定宽度，则 select2 元素将仅以 2*5px 填充开始和 0px 宽度 = 10px。对于一个好的用户体验来说，它可能有点小。在这里更新小提琴：link
在您想要的选项上设置选定的属性作为初始值：<option value="Am" selected>Amalapuram</option> 请参见此处的小提琴：http://jsfiddle.net/jEADR/326/

【解决方案2】：

您可以覆盖特定于 select2.js 的类：

.select2-container-multi .select2-choices {
    width: 150px;
}

它应该可以工作。

【讨论】：

【解决方案3】：

您可以在 select 中使用多个属性

 <html>
  <head>
    <link href="select2.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="jquery.js"></script>      
    <script type="text/javascript" src="select2.min.js"></script>     
 </head>
 <body>
    <select multiple id="getCountry">
      <option value="India">India</option>
      <option value="Afghanistan">Afghanistan</option>
      <option value="japan">japan</option>
    </select>
    <input type="button" id="submit" value="Submit">click
    <script>
      $(document).ready(function() {   
        $("#getCountry").select2();   
      });      
    </script>   
  </body>
</html>

【讨论】：