插件之下拉框Select2

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);