开发者社区> 烟火_> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

select2使用

简介: 一、简介   select2是Jquery用来代替选择框的一种组件。它让你可以定制下拉框,并且支持搜索、标记,远程数据源,无限滚动和其他更高级的功能。select2的下载地址为:https://select2.github.io/ 。
+关注继续查看

一、简介
  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%"  /><!-- 多选时加上multiple="multiple" 并在回显时,回传所选的值数组 -->
        <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 : page //当前页
                 };
             },
            results: function (data, page) { 
          var more = (page * ${tpagesize}) < data.total;//判断是还有记录
                return {
                    results: data.rows , more : more
                };
            }
          },
        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数据格式如下:

{"total":200,"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 *?
“不要使用SELECT *”几乎已经成为了MySQL使用的一条金科玉律,就连《阿里Java开发手册》也明确表示不得使用`*`作为查询的字段列表,本文从4个方面给出理由。
148 0
SELECT查询
SELECT用于从一个或多个表中检索信息,使用SELECT检索数据表需要明确: 想选择什么,以及从什么地方选择 1.
529 0
何时使用SET和SELECT为变量赋值
原文: 何时使用SET和SELECT为变量赋值         我们经常使用SET和SELECT来为变量复制,但是有时候,只能选其一来使用,下面来看看这些例子,本例中使用AdventureWorks数据库来做演示。
712 0
select查询原理
原文:select查询原理      我并非专业DBA,但做为B/S架构的开发人员,总是离不开数据库,一般开发员只会应用SQL的四条经典语句:select ,insert,delete,update。但是我从来没有研究过它们的工作原理,这篇我想说一说select在数据库中的工作原理。
1033 0
+关注
烟火_
从事java开发多年
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载