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

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

基本案列

<head>
<link href="select2.css" rel="stylesheet"/>
<script src="select2.js"></script>
<script>$(document).ready(function() { $("#qingyu").select2(); });</script>
</head>
<body>
<select id="qingyu">
    <option value="AL">Alabama</option>
    ...
    <option value="WY">Wyoming</option>
</select>
</body

可多选

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

效果图如下:

js方式初始化

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

一些常用操作

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

插件之下拉框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. linux sort 、uniq 命令

    以文件的每行为单位,从左往右依次按ascii码进行比较 sort sort.txt #默认为升序 -u:去除重复行 sort -u sort.txt -r:降序排列 sort -r sort.txt ...

  2. linux下安装oracle中遇到的一些问题

    1.出现了:Environment variable ORACLE_UNQNAME not defined. Please set ORACLE_UNQNAME to da tabase unique ...

  3. C# 判断是否是节假日

    1.引用Newtonsoft.Json.dll 2. /// <summary>        /// 判断是不是节假日,节假日返回true         /// </summar ...

  4. Linux命令格式

  5. EL表达式中fn函数

    JSTL 使用表达式来简化页面的代码,这对一些标准的方法,例如bean的getter/setter方法,请求参数或者context以及 session中的数据的访问非常方便,但是我们在实际应用中经常需 ...

  6. 去哪网实习总结:递归构建“流程运行顺序”的XML文件(JavaWeb)

    本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发... 只是还是比較认真的做了三个月,老师非常认同我的工作态度和成果.. . 实习立即就要结束了,总结一下几点之前没有注意过的变成习惯和问题.分享 ...

  7. JVM虚拟机(五):JDK8内存模型—消失的PermGen

    一.JVM 内存模型 根据 JVM 规范,JVM 内存共分为虚拟机栈.堆.方法区.程序计数器.本地方法栈五个部分. 1.虚拟机栈: 每个线程有一个私有的栈,随着线程的创建而创建.栈里面存着的是一种叫“ ...

  8. Spring mvc注解方式使用事务回滚

    项目名:1ma1ma jdbc.xml <bean  id="dataSource" class="org.apache.commons.dbcp.BasicDat ...

  9. Mysql变量声明与使用

    set @today='2017-04-25';set @ydate=DATE_SUB(@today, INTERVAL 7 day);select @today, @ydate; 待续....

  10. js 内存泄漏

    在javascript中,我们很少去关注内存的管理.我们创建变量,使用变量,浏览器关注这些底层的细节都显得很正常. 但是当应用程序变得越来越复杂并且ajax化之后,或者用户在一个页面停留过久,我们可能 ...