2023年6月21日发(作者：)
使⽤实现多功能下拉框,select2中⽂api最近项⽬中有个需求是商品能够选择多个标签，类似jire中选择标签：能把选择后选项显⽰在输⼊框中，删除时连同整个标签⼀起删。经过⽹上咨询、请教同事后，得到⼀致意见是使⽤select2。下⾯是使⽤select2的初始化、动态赋值，实现标签化多选、以及遇到的问题：2，在页⾯中新建：
，3，初始化select2很简单，$('#test_select2').select2();就⾏，这是没有任何属性和值的最简单初始化，下⾯介绍⼏个常⽤的属性：var itemList =[{id:1,text:'测试1'}{}{}{{}{}{}{}];//类似的json数组格式，可以单独⽤jquery的ajax获取服务器的数据。$('#test_select2').select2({ placeholder : '输⼊话题关键字', tags : true, multiple : true, height: '40px', maximumSelectionLength : 3, allowClear : true, language: "zh-CN", data : itemList itemList是[{}{}{}{}]格式的数组 });4，经过上⾯三步后的效果：下表是select2常⽤的属性：属性类型字说明Width符串控制 宽度 样式属性的Select2容器divminimumInputLengthmaximumInputLengthminimumResultsForSearchmaximumSelectionSizeintintIntint字最⼩数量的字符最⼤数量的字符最⼩数量的结果可选择的最⼤条⽬数placeholder符串字选择初始值separator符串布尔布尔
函数函数函数函数函数函数字符分隔符字符或字符串⽤来划定idallowClear此选项只指定占位符multipleSelect2是否允许选择多个值openOnEnter打开下拉如果设置为true,当⽤户按下回车键,Select2关闭。 默认情况下启⽤这个选项。id函数⽤于获取id从选择对象或字符串id存储代表的关键matcher⽤于确定是否搜索词匹配⼀个选项时使⽤⼀个内置的查询功能sortResults⽤于排序列表搜索之前显⽰的结果。formatSelection函数⽤于呈现当前的选择formatResult函数⽤来渲染结果,formatResultCssClass函数⽤于添加css类结果元素formatNoMatches串/函数字符串包含“不匹配”消息,或
字符函数⽤于呈现信息formatSearching串/函数字符串包含“搜索… “消息,或
字符函数⽤于呈现显⽰的消息 正在进⾏搜索。formatAjaxError串/函字符串包含消息“加载失败”,或属性
数类
型字符说明函数⽤于呈现信息formatInputTooShort串/函数包含“搜索”输⼊太短消息的字符串,或
字符函数⽤于呈现信息。formatInputTooLong串/函数包含“搜索”输⼊太短消息的字符串,或
字符函数⽤于呈现信息formatInputTooLong串/函数包含“搜索输⼊字符串太长”消息,或
字符函数⽤于呈现信息。formatSelectionTooBig串/函数字符串包含“你不能选择任何更多的选择”消息,或
字符函数⽤于呈现信息formatLoadMore串/函数函数函数/字符串/函数createSearchChoice创建⼀个新的可选选择从⽤户的搜索词。 允许创建通过查询选择不可⽤ 功能。 有⽤的⽤户可以创建动态的选择时,如“标签”usecase。createSearchChoicePosition字符串函数函数函数函数对象数定义的位置插⼊元素initSelection调⽤Select2创建允许⽤户初始化选择的值 select2附加到元素tokenizer记号赋予器函数可以处理后输⼊搜索框的输⼊每⼀个按键和提取 并选择选择。tokenSeparators⼀个字符串数组定义标记为默认的分隔符 分词器 功能。 默认情况下,此选项设置为⼀个空数组标记这意味着使⽤默认 编译器是禁⽤的。 通常是明智的,设置该选项值相似 [‘,’,’ ‘] 。query函数⽤于搜索词的查询结果。ajax选择内置的ajax查询功能。 这个对象作为快捷⽅式有⼿动编写⼀个函数,执⾏ajax请求。 内置函数⽀持更⾼级的特性,⽐如节流和⽆序的反应。data组/对择建在查询功能,使⽤数组。属性tags象类数型组/函数函说明将Select2放⼊“标签’mode,⽤户可以添加新的选择和预先存在的标签是通过提供 这个选项的属性是⼀个 数组或者⼀个 函数 返回⼀个 数组的 对象 或 字符串 。 如果 字符串 ⽽不是使⽤ 对象 他们将有⼀个被转换成⼀个对象id 和 ⽂本 属性相等 的值 字符串 。containerCss数/对象函数/内联css将被添加到select2的容器。 ⼀个对象包含css属性/值密钥对或⼀个函数,这个函数返回⼀个对象。containerCssClass字符串函Css类将被添加到select2容器的标签。dropdownCss数/对象函数/内联css将被添加到select2下拉的容器。 ⼀个对象包含css属性/值密钥对或⼀个函数,这个函数返回⼀个对象。dropdownCssClass字符串布尔函数函数函数布尔整数函数Css类将被添加到select2下拉的容器。dropdownAutoWidth当设置为 真正的 尝试⾃动尺⼨下拉基于内容的宽度。adaptContainerCssClass过滤器/重命名的css类,因为他们被复制从源标签select2容器标签adaptDropdownCssClass滤器/重命名的css类,因为他们被复制从源标签select2拉标签escapeMarkup函数⽤于后处理标记从格式化程序返回功能。 默认情况下这个功能转义的html实体,以防⽌javascript注⼊。selectOnBlur设置为 真正的 如果你想要Select2选择当前⾼亮选项时模糊。loadMorePadding定义了多少像素需要加载下⼀页前折以下。 默认值是 0 这意味着结果列表需要滚动到下⼀个页⾯的底部加载的结果。 这个选项可以⽤来触发加载更快,可能导致更流畅的⽤户体验。nextSearchTerm函数⽤于确定下⼀个搜索词应该是什么点击清除，清除原来的值$("#clearQuery").click(function (){ $("#DepartmentId").select2("data", null); $("#OwnerCode").select2("data", null); $("#hfDiseaseId").select2("data", null);});
2023年6月21日发(作者：)
使⽤实现多功能下拉框,select2中⽂api最近项⽬中有个需求是商品能够选择多个标签，类似jire中选择标签：能把选择后选项显⽰在输⼊框中，删除时连同整个标签⼀起删。经过⽹上咨询、请教同事后，得到⼀致意见是使⽤select2。下⾯是使⽤select2的初始化、动态赋值，实现标签化多选、以及遇到的问题：2，在页⾯中新建：
，3，初始化select2很简单，$('#test_select2').select2();就⾏，这是没有任何属性和值的最简单初始化，下⾯介绍⼏个常⽤的属性：var itemList =[{id:1,text:'测试1'}{}{}{{}{}{}{}];//类似的json数组格式，可以单独⽤jquery的ajax获取服务器的数据。$('#test_select2').select2({ placeholder : '输⼊话题关键字', tags : true, multiple : true, height: '40px', maximumSelectionLength : 3, allowClear : true, language: "zh-CN", data : itemList itemList是[{}{}{}{}]格式的数组 });4，经过上⾯三步后的效果：下表是select2常⽤的属性：属性类型字说明Width符串控制 宽度 样式属性的Select2容器divminimumInputLengthmaximumInputLengthminimumResultsForSearchmaximumSelectionSizeintintIntint字最⼩数量的字符最⼤数量的字符最⼩数量的结果可选择的最⼤条⽬数placeholder符串字选择初始值separator符串布尔布尔
函数函数函数函数函数函数字符分隔符字符或字符串⽤来划定idallowClear此选项只指定占位符multipleSelect2是否允许选择多个值openOnEnter打开下拉如果设置为true,当⽤户按下回车键,Select2关闭。 默认情况下启⽤这个选项。id函数⽤于获取id从选择对象或字符串id存储代表的关键matcher⽤于确定是否搜索词匹配⼀个选项时使⽤⼀个内置的查询功能sortResults⽤于排序列表搜索之前显⽰的结果。formatSelection函数⽤于呈现当前的选择formatResult函数⽤来渲染结果,formatResultCssClass函数⽤于添加css类结果元素formatNoMatches串/函数字符串包含“不匹配”消息,或
字符函数⽤于呈现信息formatSearching串/函数字符串包含“搜索… “消息,或
字符函数⽤于呈现显⽰的消息 正在进⾏搜索。formatAjaxError串/函字符串包含消息“加载失败”,或属性
数类
型字符说明函数⽤于呈现信息formatInputTooShort串/函数包含“搜索”输⼊太短消息的字符串,或
字符函数⽤于呈现信息。formatInputTooLong串/函数包含“搜索”输⼊太短消息的字符串,或
字符函数⽤于呈现信息formatInputTooLong串/函数包含“搜索输⼊字符串太长”消息,或
字符函数⽤于呈现信息。formatSelectionTooBig串/函数字符串包含“你不能选择任何更多的选择”消息,或
字符函数⽤于呈现信息formatLoadMore串/函数函数函数/字符串/函数createSearchChoice创建⼀个新的可选选择从⽤户的搜索词。 允许创建通过查询选择不可⽤ 功能。 有⽤的⽤户可以创建动态的选择时,如“标签”usecase。createSearchChoicePosition字符串函数函数函数函数对象数定义的位置插⼊元素initSelection调⽤Select2创建允许⽤户初始化选择的值 select2附加到元素tokenizer记号赋予器函数可以处理后输⼊搜索框的输⼊每⼀个按键和提取 并选择选择。tokenSeparators⼀个字符串数组定义标记为默认的分隔符 分词器 功能。 默认情况下,此选项设置为⼀个空数组标记这意味着使⽤默认 编译器是禁⽤的。 通常是明智的,设置该选项值相似 [‘,’,’ ‘] 。query函数⽤于搜索词的查询结果。ajax选择内置的ajax查询功能。 这个对象作为快捷⽅式有⼿动编写⼀个函数,执⾏ajax请求。 内置函数⽀持更⾼级的特性,⽐如节流和⽆序的反应。data组/对择建在查询功能,使⽤数组。属性tags象类数型组/函数函说明将Select2放⼊“标签’mode,⽤户可以添加新的选择和预先存在的标签是通过提供 这个选项的属性是⼀个 数组或者⼀个 函数 返回⼀个 数组的 对象 或 字符串 。 如果 字符串 ⽽不是使⽤ 对象 他们将有⼀个被转换成⼀个对象id 和 ⽂本 属性相等 的值 字符串 。containerCss数/对象函数/内联css将被添加到select2的容器。 ⼀个对象包含css属性/值密钥对或⼀个函数,这个函数返回⼀个对象。containerCssClass字符串函Css类将被添加到select2容器的标签。dropdownCss数/对象函数/内联css将被添加到select2下拉的容器。 ⼀个对象包含css属性/值密钥对或⼀个函数,这个函数返回⼀个对象。dropdownCssClass字符串布尔函数函数函数布尔整数函数Css类将被添加到select2下拉的容器。dropdownAutoWidth当设置为 真正的 尝试⾃动尺⼨下拉基于内容的宽度。adaptContainerCssClass过滤器/重命名的css类,因为他们被复制从源标签select2容器标签adaptDropdownCssClass滤器/重命名的css类,因为他们被复制从源标签select2拉标签escapeMarkup函数⽤于后处理标记从格式化程序返回功能。 默认情况下这个功能转义的html实体,以防⽌javascript注⼊。selectOnBlur设置为 真正的 如果你想要Select2选择当前⾼亮选项时模糊。loadMorePadding定义了多少像素需要加载下⼀页前折以下。 默认值是 0 这意味着结果列表需要滚动到下⼀个页⾯的底部加载的结果。 这个选项可以⽤来触发加载更快,可能导致更流畅的⽤户体验。nextSearchTerm函数⽤于确定下⼀个搜索词应该是什么点击清除，清除原来的值$("#clearQuery").click(function (){ $("#DepartmentId").select2("data", null); $("#OwnerCode").select2("data", null); $("#hfDiseaseId").select2("data", null);});
发布评论