select2使用

一、简介
  select2是Jquery用来代替选择框的一种组件。它让你可以定制下拉框,并且支持搜索、标记,远程数据源,无限滚动和其他更高级的功能。select2的下载地址为:https://select2.github.io/ 。这里使用到的是select2-4.0.0版本。下载该版本后,解压文件,在dist目录下有js与css文件。使用select就需要引用这些的文件。

二、使用
  1、引入jQuery与select2样式、js文件如下:

<link href="css/select2.min.css" rel="stylesheet" />

<script src="js/jquery.1.11.2.min.js"></script>

<script src="js/select2.min.js"></script>

<script src="js/i18n/zh-CN.js"></script>

  这里用到的Jquery是1.11.2版本,zh-CN.js为select2本地化的文件。其中select2.min.css、select2.min.js与zh-Cn.js文件都是dist目录下的文件。

  2、示例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>select2-4.0.0 示例</title>  

    <link href="css/select2.min.css" rel="stylesheet" />

</head>

<body>

    <div> 

        select2: <select id="test1"   style="width: 20%" multiple="multiple">

            <option ></option> 

            <option value="2">222222</option>  

            <option value="3">33223333</option>

            <option value="4">333333</option>

            <option value="5">223333</option>

            <option value="6">444444</option>

            <option value="7">555555</option>  

            <option value="8">666666</option>

            <option value="9">777777</option>

            <option value="10">98888888888888888888888888888888888777777</option>

        </select>

        <button id="clear2"  >清除</button>

        <button id="setValue"  >设置777777</button>

        <button id="getValue"  >获取</button>

        <button id="enable"  >enable</button>

        <button id="disable"  >disable</button>

    </div>    

    <div> 

        select2: <select id="test2"  style="width: 20%"  />

        <input id="personid" type="hidden" name="personid"  />

    </div>        



<script src="js/jquery.1.11.2.min.js"></script>

<script src="js/select2.min.js"></script>

<script src="js/i18n/zh-CN.js"></script>

<script type="text/javascript">

$(document).ready(function(){ 

    //静态select渲染

    $('#test1').select2({

        placeholder: "请选择",

        language: "zh-CN"

    });



    $("#clear2").on("click", function () { //置空

        $("#test1").val(null).trigger("change"); 

    });



    $("#setValue").on("click", function () { //设置某一个值

        $("#test1").val("9").trigger("change"); 

    });



    $("#getValue").on("click", function () { //获取选中值

        alert($("#test1").val());

    });



    $("#disable").on("click", function () { //启用

        $("#test1").prop("disabled", true); 

    });



    $("#enable").on("click", function () { //禁用

        $("#test1").prop("disabled", false); 

    });



    //select2动态加载数据

    $("#test2").select2({

        placeholder: "请选择",

        language: "zh-CN",

        ajax: {

            url: "${ctx}/person/list.action",

            dataType: 'json',

            delay: 250,

            data: function (term, page) {

                console.log(term);

                return {

                    keyword : term,//输入的内容,会发给服务器进行查找

                    //以下两行可以在数据量大的时候用到,数据量不大的时候,可以直接注释

                    //pagesize : 20,//页面大小

                    //page : 1 //当前页

                 };

             },

            results: function (data, page) { 

                return {

                    results: data.rows

                };

            }

          },

        escapeMarkup: function (markup) { return markup; }, 

        //  minimumInputLength: 1,

        formatResult: function(row) {//选中后select2显示的 内容

            return row.name;

        }, 

        formatSelection: function(row) { //选择的时候,需要保存选中的id

            $("#personid").val(row.id);

            return row.name;//选择时需要显示的列表内容

        }, 

    });    

});

</script>                                            

</body>

</html>

  对于动态渲染的下拉框,请求服务器后,服务器返回的数据是json数据。json数据格式如下:

{"rows":[{"id":"10001", "name":"zhangsan"},{"id":"10001", "name":"zhangsan"},{"id":"10001", "name":"zhangsan"},{"id":"10001", 

"name":"zhangsan"},{"id":"10001", "name":"zhangsan"},{"id":"10001", "name":"zhangsan"}]}

你可能感兴趣的:(select)