select2插件使用心得

select2是一款基于jquery的功能丰富的下拉列表插件。可以实现带搜索框、多选标签等功能。使用时只需要引入jQuery文件和select2.js、select2.css文件即可。

  • 初始化
    基础下拉使用标签。

<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插件使用心得_第1张图片
写这篇文章时,后台数据接口有点问题,所以只对所属地区写了死数据进行测试。

  • 设置宽度
    使用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是[{} {} {} {}] 格式的数组
            });

你可能感兴趣的:(jquery)