标题:html select美化模拟jquery插件select2.js
出处:向东博客 专注WEB应用 构架之美 --- 构架之美,在于尽态极妍 | 应用之美,在于药到病除
时间:Tue, 01 Mar 2016 13:33:17 +0000
作者:jackxiang
地址:http://jackxiang.com/post/8543/
内容:
背景:像下拉这样的控件,有jQuery 插件autocomplete ,现在出来一个select2.js。
select2.js是一个html select美化模拟类jquery插件,但是select2.js又远非简单的模拟美化那么简单,它还具有搜索功能,多选功能(可限制选择数量),ajax方式加载数据,可以设置placeholder,
可以设置禁用状态disabled,并且设置非常简单,如:$(".js-example-disabled").prop("disabled", false);
select2.js默认值设置:$("#select2").val("1").trigger("change"); 多选的默认值可以使用$("#select2").val(["1","2"]).trigger("change"); 这样传递数组过去。
select2还有丰富的自定义事件
$("#select2").on("select2:open", function (e) { log("select2:open", e); });
$("#select2").on("select2:close", function (e) { log("select2:close", e); });
$("#select2").on("select2:select", function (e) { log("select2:select", e); });
$("#select2").on("select2:unselect", function (e) { log("select2:unselect", e); });
$("#select2").on("change", function (e) { log("change"); });
更多丰富的select2用法请参考https://select2.github.io/examples.html,懒人建站也会在稍后给出实际应用中的一些例子,和一些方便调用的小花招。
select2小花招:自己定义当前选中的selected值,我们在select2的节点上给出一个