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);});//获取文本===>$(".selector").find("option:selected").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"); });//关闭下拉框
其他
更多详细参数请参考:
http://ivaynberg.github.io/select2/
https://github.com/laiwei/select2
