知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

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

    作者:佳明妈 来源:懒人建站 2015-03-30 人气:
    select2.js是一个html select美化模拟类jquery插件,但是select2.js又远非简单的模拟美化那么简单,它还具有搜索功能,多选功能(可限制选择数量),ajax方式加载数据,可以设置placeholder,
    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的节点上给出一个<select class="test1" data-selected="2"> 看红色部分,然后我们就可以在设置选中值得时候就可以使用如下js代码,
    $("#select2").val(function(){
                      return $(this).data("selected")
                  }).trigger("change");

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

    ↓ 查看全文

    html select美化模拟jquery插件select2.js由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    html select美化模拟jquery插件select2.js-最新评论

    • 懒人建站网友 2016-02-19 04:54:01
      完全可以,你可以使用下面的 自定义实现 呀, $("#select2").on("select2:select", function (e) { console.log("select2:select", e); }); 比如我就用这个自定义事件实现移除验证的错误提示: $(this).on("select2:select", function (e) { $(e.target).siblings(".error").hide() }); $(this) 是我封装的插件 传过来的
    • 11 2016-02-19 04:02:01
      完全可以,你可以使用下面的 自定义实现 呀, $("#select2").on("select2:select", function (e) { console.log("select2:select", e); }); 比如我就用这个自定义事件实现移除验证的错误提示: $(this).on("select2:select", function (e) { $(e.target).siblings(".error").hide() }); $(this) 是我封装的插件 传过来的
    • 小崔 2015-11-02 04:14:57
      下载的没有demo
    • 11 2015-11-02 04:11:57
      下载的没有demo
    • 淹慕参05 2015-10-29 02:58:17
      [赞啊]
    • 11 2015-10-29 02:10:17
      [赞啊]
    • 11 2015-10-10 11:10:14
      把一切平凡的事做好即不平凡,把一切简单的事做好即不简单。
    • 11 2015-09-12 04:09:34
      不错 学习了!
    • 11 2015-07-02 10:07:38
      可不可以选中下拉框之后把其他的输入框清空的
    • 11 2015-04-05 10:04:55
      select2.js是一个html select美化模拟类jquery插件,但是select2.js又远非简单的模拟美化那么简单,它还具有搜索功能,多选功能(可限制选择数量),ajax方式加载数据,可以设置placeholder,
      可以设置禁用状态disabled,并且设置非常简单,如:$(".js-example-disabled").prop("disabled", false);
      http://www.51xuediannao.com/js/jquery/select2.html