select2是一款基于jquery的功能丰富的下拉列表插件。可以实现带搜索框、多选标签等功能。使用时只需要引入jQuery文件和select2.js、select2.css文件即可。
- 初始化
基础下拉使用标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/select2/select2.min.css" />
</head>
<body>
<select id="test-select2"></select>
<script src="../js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/select2/select2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('#test-select2').select2({
language: "zh-CN",
width :"100%",
data: [
{id:'1',text:"111"},
{id:'2',text:"dd"},
{id:'3',text:"ff"},
{id:'4',text:"gg"},
{id:'5',text:"ww"},
{id:'6',text:"ss"},
{id:'7',text:"ff"}
] //data使用对象数组[{},{}] 必须的属性是id text,可以自定义添加属性
});
</script>
</body>
</html>- 数据回显。
在实际的开发过程中，经常会遇到这样的现象：表单中使用select下拉，当需要修改/编辑时，页面数据时从数据库读出来并回显到页面的。那么select2如何回显数据呢？
$(jq选择器).select2().val("回显的数据").trigger("change"); //val（）中是需要回显的数据，一般是对象.属性的方式下面是项目中的代码片段及效果（别问我为什么使用eq,前辈们留下财富）
写这篇文章时，后台数据接口有点问题，所以只对所属地区写了死数据进行测试。
- 设置宽度
使用select2插件后，select标签的一些属性就失效了（宽度）
可以在初始化时设置相应的属性
设置宽度
$('#test-select2').select2({
language: "zh-CN",
width :"100%", //字符串 支持固定数值和百分比
data: [
{id:'1',text:"111"},
{id:'2',text:"dd"},
{id:'3',text:"ff"},
{id:'4',text:"gg"},
{id:'5',text:"ww"},
{id:'6',text:"ss"},
{id:'7',text:"ff"}
] //itemList是[{} {} {} {}] 格式的数组
});
2626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
