你的位置:首页 > 网页设计

[网页设计]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="/images/loading4.gif" data-original="js/jquery.1.11.2.min.js"></script><script src="/images/loading4.gif" data-original="js/select2.min.js"></script><script src="/images/loading4.gif" data-original="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="/images/loading4.gif" data-original="js/jquery.1.11.2.min.js"></script><script src="/images/loading4.gif" data-original="js/select2.min.js"></script><script src="/images/loading4.gif" data-original="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"}]}