html select插件,html select美化模拟jquery插件select2.js

川长思鸟来 2022-10-06 13:50 226阅读 0赞

select2.js是一个html select美化模拟类jquery插件，但是select2.js又远非简单的模拟美化那么简单，它还具有搜索功能，多选功能(可限制选择数量)，ajax方式加载数据，可以设置placeholder，

html select美化模拟jquery插件select2.js

查看演示 立即下载 GitHub 评论/建议/报错 打赏支持

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的节点上给出一个 看红色部分，然后我们就可以在设置选中值得时候就可以使用如下js代码，

$("\#select2").val(function()\{

return $(this).data("selected")

\}).trigger("change");

利用val()接收一个函数，而且可以利用 this

本文链接：html select美化模拟jquery插件select2.jshttp://www.51xuediannao.com/js/jquery/select2.html

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery中使用select2插件实现ajax实时请求数据

场景效果 ![Image 1][]![20190626095745808.gif][] select2相关 select2官网： [https://se

不念不忘少年蓝@/ 2023年10月18日 20:29/ 0 赞/ 38 阅读

相关 jQuery插件-搜索下拉框bootstrap-select

我主要是使用 `bootstrap-select` 插件的搜索下拉框的功能先看看效果 ![在这里插入图片描述][20200729131355125.gif] 使用

朱雀/ 2023年03月02日 13:10/ 0 赞/ 15 阅读

相关 html select插件,html select美化模拟jquery插件select2.js

select2.js是一个html select美化模拟类jquery插件，但是select2.js又远非简单的模拟美化那么简单，它还具有搜索功能，多选功能(可限制选择数量)，

川长思鸟来/ 2022年10月06日 13:50/ 0 赞/ 227 阅读

相关 jquery select2插件改造

[Select2][] [How to use][Select2] <link href="/select2/select2.min.css" rel="s

痛定思痛。/ 2022年06月14日 02:12/ 0 赞/ 212 阅读

相关 SELECT 2 —— 替代SELECT 组件的jQuery 插件

文档地址： [https://select2.org/][https_select2.org] 一、简介 select2 是替代select 组件的jQu

逃离我推掉我的手/ 2022年06月07日 07:43/ 0 赞/ 678 阅读

相关 jQuery 插件：下拉框控件（select2）

官网：[https://select2.org/][https_select2.org] 官网例子：[http://select2.github.io/select2/in

Myth丶恋晨/ 2022年05月28日 03:38/ 0 赞/ 1082 阅读

相关 wenzhixin/multiple-select select复选插件

文章目录场景解决场景修改老项目, 增加对复选select的控制, 没有办法使用 [sagalbot/vue-

墨蓝/ 2022年05月11日 11:24/ 0 赞/ 228 阅读

相关 html pdf jquery插件

GitHub地址：[https://github.com/malsup/media/tree/master][https_github.com_malsup_media_tre

痛定思痛。/ 2022年04月17日 03:52/ 0 赞/ 223 阅读

相关 JS-selectize插件使用

Selectize是基于jQuery的input和select的结合。它的使用场景通常在标记，联系人列表，国家/地区选择器等。 GitHub： > [https://

客官°小女子只卖身不卖艺/ 2022年04月01日 06:09/ 0 赞/ 377 阅读

相关前端插件一：jQuery Multi-Select多选插件

项目此项目是替换标准`<select>`（含有`multiple`属性的`select`标签）的一套交互友好的组件。特点免费（基于WTFPL许可证）

一时失言乱红尘/ 2021年06月26日 16:06/ 0 赞/ 969 阅读