zoukankan      html  css  js  c++  java
  • html select美化模拟jquery插件select2.js

    代码展示:http://www.51xuediannao.com/demo.php

    代码说明:

    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
  • 相关阅读:
    CF1137C Museums Tour(tarjan+DP)
    Educational Codeforces Round 65 (Rated for Div. 2)
    Codeforces Round #559(Div.1)
    委托
    类库
    is 和 as 运算符
    面向对象 接口
    抽象类
    面向对象 多态
    访问修饰符 程序集 静态方法
  • 原文地址:https://www.cnblogs.com/Better-Me/p/4686416.html
Copyright © 2011-2022 走看看