SELECT 2 —— 替代SELECT 组件的jQuery 插件 逃离我推掉我的手 2022-06-07 07:43 609阅读 0赞 文档地址: [https://select2.org/][https_select2.org] **一、简介** select2 是替代select 组件的jQuery 插件,它能给你一个自定义的列表选择组件,自定义支持如搜索、标签、远程数据集、无限滚动等及其它常用的选项。 1、安装 CDN(Content Delivery Network)方式: <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" /> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script> 另外还有安装插件方式、本地引用方式。(因为是jQuery 插件,需在之前引入jQuery) 2、基础使用 代码: <body> <select class="singleSelect"> <option>选项一</option> <option>选项二</option> <option>选项三</option> </select> <select class="multiSelect" multiple="multiple"> <option>选项一</option> <option>选项二</option> <option>选项三</option> </select> <script type="text/javascript"> $(document).ready(function() { $('.singleSelect').select2(); $('.multiSelect').select2(); }); </script> </body> 效果: ![Center][] **二、问题求解** 遇到使用问题时,如何求助:[https://select2.org/troubleshooting/getting-help][https_select2.org_troubleshooting_getting-help] **三、select2 可选配置** **1、配置形式** 调用select2 时传入对象即可,如: $('.myselect').select2({placeholder:"请输入账号"}) **2、完整可配置参数** 查看文档:[https://select2.org/configuration/options-api][https_select2.org_configuration_options-api] 在此列举常用几个配置: allowClear: boolean,是否可清除已选数据,默认false,设置为true后下拉输入框右侧会多出个小叉用于清除已选数据。 closeOnSelect: boolean,默认true,选中某个数据项后是否收起下拉框。 multiple: boolean,是否为多选下拉框,默认false。该值会自动读取select 元素的multiple 属性。 maxmumSelectionLength: 为多选下拉框时最大可选取数,默认为0,小于1 时则没有选取数限制。 placeholder: 提示文本。对于非multiple 的下拉框,第一个option必须为空(如<option></option>),对multiple 下拉框则不需要。 selectionAdapter: singleSelection|mutipleSelection,取决于select 元素的multiple 属性。 width: string,渲染的宽度,默认"resolve"。几个可选值:element(从CSS 规则计算元素宽度)、style(从元素的style 属性)、resolve(从可获取的style 属性计算宽度,有必要的话(应该指style为空),返回其它方式计算宽度值)、<value>(有效的CSS 值计算,如width:'50%')。对最后一个值不太理解,个人觉得最好使用element 或style。如: <select class="multiSelect" multiple="multiple" style="width:50%"> <option>选项一</option> <option>选项二</option> <option>选项三</option> </select> <script type="text/javascript"> $(document).ready(function() { $('.multiSelect').select2({width:"element"}); }); </script> theme: string,classic|..,如果为classic,则使用经典的外观。 templateResult: 回调函数(返回的是html),选项被渲染的方式。 templateSelection: 回调函数(返回的是html),选中的结果被渲染的方式。下面是简单的示例,如果用img 等标签引入图标,效果会更好。 <select class="singleSelect1"> <option>选项一</option> <option>选项二</option> <option>选项三</option> </select> <select class="singleSelect2"> <option>选项一</option> <option>选项二</option> <option>选项三</option> </select> <script type="text/javascript"> $(document).ready(function() { $('.singleSelect1').select2({templateResult:function(state){return state.text+" - 选项"}}); $('.singleSelect2').select2({templateSelection:function(state){return state.text+" - 选项"}}); }); </script> 效果: ![Center 1][] 疑问:你可能会对回调函数的参数state有点疑问,有问题,找console,打印结果如下(可见是对当前选项的一个包装): ![Center 2][] 回调函数可以传两个参数,第二个参数为当前选项的html 内容,对于此处,选项一的为: ![Center 3][] **3、全局默认设置** 例如: $.fn.select2.defaults.set("theme", "classic"); 清除全局默认设置: $.fn.select2.defaults.reset(); 对某些选项,进行全局默认设置还是很有用的。 **4、data-\* 自定义属性形式设置选项** 对第一层的属性,用单个破折号,对第二层的属性,用两个破折号(为了不与驼峰命名的该元素的dom属性冲突)。如: <select data-placeholder="Select a state"> <option value="AL">Alabama</option> ... <option value="WY">Wyoming</option> </select> 下面两项设置作用一样: js 设置: $(".js-example-data-ajax").select2({ ajax: { url: "http://example.org/api/test", cache: false } }); 等同于data-\* 设置: <select data-ajax--url="http://example.org/api/test" data-ajax--cache="true"> ... </select> **四、外观** **1、禁用select 或某个选项** <select id="test"> <option disabled>选项一</option> <option>选项二</option> </select> <script> $.ready(function(){ $("#test").select2(); //$("#test").prop("disabled",true);禁用该select }) **2、选项标签** 可以为select 设置标签。格式(对多选框相同,注意for 属性): <label for="id_label_single"> Click this to highlight the single select element <select id="id_label_single"></select> </label> 效果: ![Center 4][] 说明:样式默认是固定的,可能与浏览器支持相关,自己测试未成功,所以不知道label 是否总是在下拉列表上方。 **3、容器宽度** 即第一项中width 配置属性。 **4、主题** 第一项中theme 配置属性。 **五、选项与选项组** **1、禁用选项组。设置option 的disabled 属性即可。** 选项的dom将被转换为数据对象: { "id": "value attribute" || "option text", "text": "label attribute" || "option text", "element": HTMLOptionElement } **2、选项分组(很有用)** 选项分组: <select id="singleSelect1"> <optgroup label="组1"> <option>选项一</option> </optgroup> <optgroup label="组2"> <option>选项一</option> <option>选项二</option> </optgroup> </select> <script type="text/javascript"> $(document).ready(function() { $('#singleSelect1').select2(); }); </script> 效果: ![Center 5][] 组的数据对象形式为(用console查看): { "text": "label attribute", "children": [ option data object, ... ], "element": HTMLOptGroupElement } **六、数据源** 此项与第五项中相关联,选项的数据被select2 封装成特定形式的json 对象,如果提供该形式的json 对象,可以反过来渲染成一个选项或选项组(若原来下拉框已经有选项,新渲染的选项会加在已存在选项后面)。 1、用已获得数据渲染为选项或选项组 **示例一:渲染为不分组的下拉框选项** <select class="singleSelect2"> <option>选项一</option> <option>选项二</option> <option>选项三</option> </select> <script type="text/javascript"> $(document).ready(function() { $(".singleSelect2").select2({ data: [ { "id": 1, "text": "Option 1" }, { "id": 2, "text": "Option 2" } ] }) $(".singleSelect2").on("change",function(){ alert($(".singleSelect2").val()) }) }); </script> 效果: ![Center 6][] **示例二:渲染为选项组** <script type="text/javascript"> $(document).ready(function() { $(".singleSelect2").select2({ data: [ { "id": 1, "text": "Option 1" }, { "text": "组", "children": [ {"id":2,"text":"组选项一"}, {"id":3,"text":"组选项二"} ] } ] }) $(".singleSelect2").on("change",function(){ alert($(".singleSelect2").val()) }) }); </script> 效果: ![Center 7][] 可见,还是非常方便的。此外,对于此种方式添加的选项,除了id 与text 属性外,也有disabled (禁用)、selected(默认选中,而非checked,checked只是checkbox的属性)等属性。 说明:id 为元素值。即$().val()的值。只实践了data 属性,results 属性还不太熟悉,渲染失败。 **2、ajax 数据渲染** 和上面差不多,只是返回的数据为select2 的数据形式即可。 $('.js-data-example-ajax').select2({ ajax: { url: 'https://api.github.com/search/repositories', dataType: 'json' // Additional AJAX parameters go here; see the end of this chapter for the full code of this example } }); **七、动态创建选项** 动态创建选项指,在输入框中数据数据并回车,数据将成为新的选项(单选多选下拉框都支持)。使用tags 属性: $(".test").select2({ tags: true }); **八、自己使用中的一些问题** 1、弹出下拉框后,下拉框收起时,之前被下拉框覆盖的部分区域出现黑块(就像元素没刷新显示似的),升级layer 插件为3.1.0 及以上就好了。 2、用data 属性渲染下拉列表的选项时,组(optgroup)不能再嵌套组。组包含组时,虽然显示是正确的,但点击第二层组内的选项取不到value,也不会更新选中元素的显示,还会有其它一系列问题。此外,用optgroup 时,组名的一行是无法选择的,这可能在某些场合将不适用。 解决办法:用普通的选项模拟组的显示。 代码: <select class="singleSelect2" style="width:400px" multiple="multiple"> <option>选项一</option> <option>选项二</option> <option>选项三</option> </select> <script type="text/javascript"> $(document).ready(function() { $(".singleSelect2").select2({ "data": [ {"id": 1,"text": "选项四组"}, {"id":2,"text":"组选项一"}, {"id":3,"text":"组选项二"}, {"id":4,"text":"内部组选项一"}, {"id":5,"text":"内部组选项二"} ], templateResult:function(state){ //放回值将作为li元素的html,所以多个空格只会展示一个,内联元素默认的 console.log(state); if(state.id == 2 || state.id==3){ //state.text不能放在尾部,否则不会显示(原因未知) var liHtml = $('<span style="padding-left:2em">'+state.text+'</span>'); return liHtml; }else if(state.id == 4 || state.id == 5){ var liHtml = $('<div style="padding-left:4em">'+state.text+'</div>'); return liHtml; }else return state.text; } }) $(".singleSelect2").on("change",function(){ alert($(".singleSelect2").val()) }) }); </script> **注意:注意上面代码的注释内容!span 中style似乎不支持一些css 属性。** 效果: ![Center 8][] 3、最好不要试图通过强行修改select2 中定义的类的方式修改样式,否则功能可能受影响(如自己在templateSelection 中将select2-container类的css 设置为100 %,发现placeholder 将出现显示问题)。对于宽度,修改select 元素的宽度就好了,然后在select2 的配置中配置width 属性为100%。 4、多选框的 plachholder 显示问题。当为多选框时,数据最好在select2(\{data:\[...\],placeholder:"..."\}) 的参数列表中通过data属性提供,若通过在已有option 选项的select元素dom上调用select2(),则placeholder 会出现显示宽度受到限制问题。 文档:[select2 文档][https_select2.org] [https_select2.org]: https://select2.org/ [Center]: /images/20220607/50578158694240c7a63defed86c1427b.png [https_select2.org_troubleshooting_getting-help]: https://select2.org/troubleshooting/getting-help [https_select2.org_configuration_options-api]: https://select2.org/configuration/options-api [Center 1]: /images/20220607/e518440d1ad64aba9b87fa085edaa70e.png [Center 2]: /images/20220607/7da6955168144ac89aff3cf9055b27cd.png [Center 3]: /images/20220607/093583abfd424062abc1a32df3484121.png [Center 4]: /images/20220607/022b336b665d47cabd2eef2a3be37cf5.png [Center 5]: /images/20220607/9a9da48d39614508a5bb0ee8c3a0d044.png [Center 6]: /images/20220607/9cc46f1f05204bf39179bd0b928dea11.png [Center 7]: /images/20220607/6ad01a2325f5482f86964c7258ea36d1.png [Center 8]: /images/20220607/f0167569c3f84fd9a0b80b5045af386d.png
还没有评论,来说两句吧...