select2 属性Git一下

ゝ一世哀愁。 2022-02-20 00:59 331阅读 0赞

### 一、select2 属性 ###

<table> 
 <thead> 
 <tr> 
 <th>属性</th> 
 <th>类型</th> 
 <th>描述</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>width</td> 
 <td>string</td> 
 <td>控制宽度样式属性的Select2容器div</td> 
 </tr> 
 <tr> 
 <td>minimumInputLength</td> 
 <td>integer</td> 
 <td>最小数量的字符</td> 
 </tr> 
 <tr> 
 <td>maximumInputLength</td> 
 <td>integer</td> 
 <td>最大数量的字符</td> 
 </tr> 
 <tr> 
 <td>minimumResultsForSearch</td> 
 <td>integer</td> 
 <td>最小数量的结果</td> 
 </tr> 
 <tr> 
 <td>maximumSelectionSize</td> 
 <td>integer</td> 
 <td>可选择的最大条目数</td> 
 </tr> 
 <tr> 
 <td>placeholder</td> 
 <td>string</td> 
 <td>选择初始值(提示语)</td> 
 </tr> 
 <tr> 
 <td>placeholderOption</td> 
 <td>function/string</td> 
 <td>当附加到一个selectresolve时，option它应该用作占位符。可以是给定select元素应该返回option 元素的函数，也可以是first指示应该使用第一个选项的字符串。当Select2默认使用第一个选项时，此选项非常有用，前提是它没有值且没有文本不合适。</td> 
 </tr> 
 <tr> 
 <td>separator</td> 
 <td>string</td> 
 <td>分隔符字符或字符串用来划定id</td> 
 </tr> 
 <tr> 
 <td>multiple</td> 
 <td>boolean</td> 
 <td>select2是否允许选择多个值。 当select2附加到select元素时，该值将被忽略，并将使用select的multiple属性。</td> 
 </tr> 
 <tr> 
 <td>closeOnSelect</td> 
 <td>boolean</td> 
 <td>如果设置为false，则在进行选择后不会关闭下拉列表，从而允许快速选择多个项目。默认情况下，此选项设置为“true”。</td> 
 </tr> 
 <tr> 
 <td>openOnEnter</td> 
 <td>boolean</td> 
 <td>如果设置为“true”，则当用户按Enter键并关闭Select2时，将打开下拉列表。默认情况下，启用此选项。</td> 
 </tr> 
 <tr> 
 <td>data</td> 
 <td>array/object</td> 
 <td>用于与数组一起使用的内置查询函数的选项。 如果此元素包含数组，则数组中的每个元素都必须包含ID和文本键。 或者，可以将此元素指定为一个对象，其中结果键必须以数组形式包含数据，文本键可以是包含文本的数据项中键的名称，也可以是从数组中检索给定数据元素的文本的函数。</td> 
 </tr> 
 <tr> 
 <td>tags</td> 
 <td>array/object</td> 
 <td>将select2置于“标记”模式，在该模式下，用户可以添加新的选项，并通过该选项属性（数组或返回对象或字符串数组的函数）提供预先存在的标记。如果使用字符串而不是对象，则它们将被转换为ID和文本属性等于字符串值的对象。</td> 
 </tr> 
 <tr> 
 <td>containerCss</td> 
 <td>function/object</td> 
 <td>将添加到Select2的容器中的内联CSS。包含css属性/值键对的对象或返回此类对象的函数。</td> 
 </tr> 
 <tr> 
 <td>containerCssClass</td> 
 <td>function/string</td> 
 <td>将添加到Select2的容器标记中的CSS类。</td> 
 </tr> 
 <tr> 
 <td>dropdownCss</td> 
 <td>function/object</td> 
 <td>将添加到Select2的下拉容器中的内联CSS。包含css属性/值键对的对象或返回此类对象的函数。</td> 
 </tr> 
 <tr> 
 <td>dropdownCssClass</td> 
 <td>function/string</td> 
 <td>将添加到Select2的下拉容器中的CSS类。</td> 
 </tr> 
 <tr> 
 <td>dropdownAutoWidth</td> 
 <td>function/object</td> 
 <td>将添加到Select2的容器中的内联CSS。包含css属性/值键对的对象或返回此类对象的函数。</td> 
 </tr> 
 <tr> 
 <td>containerCss</td> 
 <td>boolean</td> 
 <td>如果设置为“true”，则会根据内部内容自动调整下拉列表的宽度。</td> 
 </tr> 
 <tr> 
 <td>selectOnBlur</td> 
 <td>boolean</td> 
 <td>如果希望select2在模糊时选择当前突出显示的选项，则设置为true。</td> 
 </tr> 
 <tr> 
 <td>loadMorePadding</td> 
 <td>boolean</td> 
 <td>如果设置为“true”，则会根据内部内容自动调整下拉列表的宽度。</td> 
 </tr> 
 <tr> 
 <td>containerCss</td> 
 <td>integer</td> 
 <td>定义在加载下一页之前，折叠下方需要多少像素。默认值为0，这意味着需要将结果列表一直滚动到底部才能加载下一页的结果。此选项可用于更快地触发加载，可能会带来更流畅的用户体验。</td> 
 </tr> 
 <tr> 
 <td>tokenSeparators</td> 
 <td>array</td> 
 <td>为默认标记器函数定义标记分隔符的字符串数组。默认情况下，此选项设置为空数组，这意味着禁用使用默认标记器的标记化技术。通常，将此选项设置为类似于[’,’, ’ ']。</td> 
 </tr> 
 </tbody> 
</table>

### 二、常用属性 ###

tags: true,                             // 根据搜索框创建option，默认false
    maximumSelectionLength: 6,              // 最多能够选择的个数
    multiple: true,                         // 多选，默认false
    data: initdata,                         // 下拉框绑定的数据
    allowClear: true,                       // 清空，默认false
    placeholder: '请添加或选择语言'            // 占位提示符
    maximumInputLength: 20,                 // 允许搜索长度  
    minimumResultsForSearch: 20,            // 至少20个结果的时候显示搜索  
    minimumResultsForSearch: Infinity,      // 永久隐藏搜索框  
    selectOnClose: true,                    // 结果显示高亮  
    closeOnSelect: false,                   // select选中关闭下拉框  
    separator: ",",                         // 分隔符

### 三、Example Code ###

**简单示例：**

<head>
 <link href="select2.css" rel="stylesheet"/>
 <script src="select2.js"></script>
 <script>
 $(document).ready(function() { $("#sel").select2(); });
 </script>
 </head>
 <body>
 <select id="sel">
 <option value="" selected>水果</option>
 <option value="apple">苹果</option>
 ...
 <option value="banana">香蕉</option>
 </select>
 </body>

**初始化select2的选项值：**

$('#sel').select2().val(['', '--水果--']).trigger('change');

[Select2-官网][Select2-]

告诉自己不要那么念旧，不要那么执着不放手。

[Select2-]: http://select2.github.io/select2/#documentation