select2 属性Git一下

最新推荐文章于 2022-07-04 17:09:50 发布

William Wang~

最新推荐文章于 2022-07-04 17:09:50 发布

阅读量543

点赞数

分类专栏：前端技术文章标签： Select2插件

本文链接：https://blog.csdn.net/qq_42773229/article/details/89227051

版权

前端技术专栏收录该内容

12 篇文章 1 订阅

订阅专栏

一、select2 属性

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

二、常用属性

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-官网

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

William Wang~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
select2 属性Git一下

一、select2 属性属性类型描述widthstring控制宽度样式属性的Select2容器divminimumInputLengthinteger最小数量的字符maximumInputLengthinteger最大数量的字符minimumResultsForSearchinteger最小数量的结果maximumSelectionS...
复制链接

扫一扫