select2为代替常规的select而出现,可自定义select的样式,最明显的功能就是集合中可以搜索

关于浏览器要求,ie8+,Chrome 8+,Firefox 10+,Safari 3+,Opera 10.6+

基本案列

  1. <head>
  2. <link href="select2.css" rel="stylesheet"/>
  3. <script src="select2.js"></script>
  4. <script>$(document).ready(function() { $("#qingyu").select2(); });</script>
  5. </head>
  6. <body>
  7. <select id="qingyu">
  8.     <option value="AL">Alabama</option>
  9.     ...
  10.     <option value="WY">Wyoming</option>
  11. </select>
  12. </body

可多选

  1.     $("#qingyu").select2({
  2.     allowClear: true//单选
  3.     });
  4.     $("#qingyu").select2();//多选

效果图如下:

js方式初始化

  1. $("#qingyu").select2("data",[{id:"CA", text:"California"},{id:'abc',text:'sadf'}]);

一些常用操作

  1.  //单选
  2.     $(".qingyu").click(function () { alert("Selected value is: "+$("#qingyu").select2("val"));});//获取选中值
  3.     $(".qingyu").click(function () { alert("Selected value is: "+$("#qingyu").select2("data").text);});//获取文本
  4.     $(".qingyu").click(function () { $("#qingyu").select2("val", "CA"); });//设置选中值
  5.     $(".qingyu").click(function() { $("#qingyu").select2("val", ""); });//清除选中值为初始值
  6.     $(".qingyu").click(function () { var data = $("#qingyu").select2("data"); delete data.element; alert("Selected data is: "+JSON.stringify(data));});//下拉框元素信息
  7.     $(".qingyu").click(function () { $("#qingyu").select2("data", {id: "CA", text: "California"}); });//添加且选中
  8.     $(".qingyu").click(function () { $("#qingyu").select2("open"); });//打开下拉框
  9.     $(".qingyu").click(function () { $("#qingyu").select2("close"); });//关闭下拉框
  10.     //多选
  11.     $(".qingyu").click(function () { alert("Selected value is: "+$("#e8_2").select2("val"));});//获取选中值
  12.     $(".qingyu").click(function () { $("#qingyu").select2("val", ["CA","MA"]); });//设置选中值
  13.     $(".qingyu").click(function () { alert("Selected value is: "+JSON.stringify($("#qingyu").select2("data")));});//下拉框元素信息
  14.     $(".qingyu").click(function () { $("#qingyu").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]); });//添加且选中
  15.     $(".qingyu").click(function() { $("#qingyu").select2("val", ""); });//清除选中值为初始值
  16.     $(".qingyu").click(function () { $("#qingyu").select2("open"); });//打开下拉框
  17.     $(".qingyu").click(function () { $("#qingyu").select2("close"); });//关闭下拉框
  18.  
  19. 开发中用到：
  1. var a = [];
    $.each(contactTarget, function(point, item){
        var one = {};
        one.id = item.groupId;
        one.text = item.groupName;
        a.push(one);
    });
  2.  
  3. var select = $(".select2", wraper);
    select.select2({tags:a});
    select.select2("data",a);
  1.  

插件之下拉框Select2的更多相关文章

  1. 非常实用的select下拉框-Select2.js

    在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...

  2. yii2组件之下拉框带搜索功能（yii-select2）

    简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程. 如果你还没有使用过composer,你可就out了,看我的教程分享,composer简直就是必备神奇有木有. ...

  3. ASP.NET MVC之下拉框绑定四种方式（十）

    前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC ...

  4. 转：python webdriver API 之下拉框处理

    下拉框也是 web 页面上非常常见的功能,webdriver 对于一般的下拉框处理起来也相当简单,要想定位下拉框中的内容,首先需要定位到下拉框:这样的二次定位,我们在前面的例子中已经有过使用,下面通过 ...

  5. thymeleaf之下拉框回显选中

    #1.select下拉框取值    <div class="form-group ">        <label id="resource" ...

  6. 【Python+selenium Wendriver API】之下拉框定位

    上代码: # coding:utf-8 from selenium import webdriver from selenium.webdriver.common.action_chains impo ...

  7. Python自动化之下拉框，隐藏标签定位 代码&报错解决

    python自动化:下拉框定位方法之select标签  style="display: none;" 报错 selenium.common.exceptions.ElementNo ...

  8. Selenium之下拉框操作

    下拉框操作: 一般下拉框适用场景:在新增时有下拉框选项,在二级联动或多级联动有下拉(比如:在选择省市县时的多级联动下拉). 下拉框选择都有select的标签属性,存在两个属性select和option ...

  9. （十一）easyUI之下拉框

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

随机推荐

  1. Android Studio 怎样打开两个项目?

    欢迎转载: 请注明 原创Url

  2. jQuery Event.which 属性详解

    jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对 ...

  3. 使用 Python 的 matplotlib 绘图库进行绘图

    matplotlib 是 Python 最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中. 1  使用 Ma ...

  4. Linux 间网线直连

    核心提示:两台linux 系统用交叉线直连的方法: 1.交叉网线制作 A头:白橙,橙,白绿,蓝,白蓝,绿,白褐,褐 B头:白绿,绿,白橙,蓝,白蓝,橙,白褐,褐 即 B头的1.3脚相对A头互换:2脚与 ...

  5. dango models and database ---- relation ship

    一.django自带的ORM中可以定义表与表之间的对应关系.现比较一下各个不同关系之间数据库端的实现 1.ForeignKey(ManyToOne)关系 from django.db import m ...

  6. vue组件调用(全局调用和局部调用)

    当用vue-cli创建一个项目后, 创建项目的方法: https://www.cnblogs.com/fps2tao/p/9376847.html 编写了组件怎么,在其他组件中调用了? 组件listB ...

  7. 蜜果私塾：informix数据库学习合集[不断补充]

    一.infomix使用备忘录     目录结构:     1. 启动与停止命令:      2. 修改数据库编码:      3. 查看informix占用的端口:      4. 使用dbacces ...

  8. Atitit.mssql 数据库表记录数and 表体积大小统计

    Atitit.mssql 数据库表记录数and 表体积大小统计 1. EXEC   sp_MSforeachtable   "EXECUTE   sp_spaceused   '?'&quo ...

  9. atitit.产品console 日志的aticonsole 方案处理总结

    atitit.产品console 日志的aticonsole 方案处理总结 1. 主要原理流程 1 2. 调用代码 1 3. 内部主要实现 1 3.1. 放入消息 1 3.2. 读取消息 2 默认可以 ...

  10. Decoration6：改数据结构为继承的关系

    一个家装市场有各种登录的角色:设计师.业主…… 这些角色有一些共同的字段,例如passWord,userName,age等等,但是分别又有自己的一些特殊字段,例如设计师要写自己的设计经历,业主可能要有 ...