zoukankan      html  css  js  c++  java
  • select2的用法

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

    <script src="../js/jquery-1.8.2.min.js"></script>  

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

    <select class="js-data-example-ajax" id="liaison" ></select>

    $("#liaison").select2({
    ajax: {
    url: "../../weixin/ashx/outside/applicat.ashx?action=liaison",
    dataType: 'json',
    delay: 250,
    data: function (params) {
    return {
    q: params.term, // 输入的值
    page: params.page
    };
    },
    processResults: function (data, params) {

    params.page = params.page || 1;

    return {
    results: data.items, //返回值格式[{id:1,text:'text'},{id:2,text:'text'}]如果不按照此格式数据可能显示不出来,或者再次选择时值赋不上。
    pagination: {
    more: (params.page * 10) < data.total_count
    }
    };
    },
    cache: true
    },
    placeholder: '联络人搜索',
    escapeMarkup: function (markup) { return markup; }, //自定义显示
    minimumInputLength: 2, //输入长度
    templateResult: formatRepo,
    language: "zh-CN",
    templateSelection: formatRepoSelection
    });

    function formatRepo(repo) {
    if (repo.loading) {
    return repo.text;
    }

    var markup = "<div class='select2-result-repository clearfix'>" +
    // "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
    "<div class='select2-result-repository__title'>" + repo.text + "</div>";
    //if (repo.description) {
    // markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
    //}
    markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.name + "--" + repo.depname + " </div>" +
    //"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    //"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
    "</div>" +
    "</div></div>";

    return markup;
    }

    function formatRepoSelection(repo) {
    return repo.name || repo.text;
    }

    取值----------------------------$("#liaison").select2("data")[0].text

    赋值----------------------------- $("#liaison").append(new Option("Jquery", 10001, false, true));

  • 相关阅读:
    A. SwapSort
    D. A Shade of Moonlight
    利用DataSet更改数据,将更改保存到数据库中
    接口设计与数据同步解决方案小结
    SQL 判断 ‘表,存储过程,函数 ...’ 已是否存在
    SQL Server系统表sysobjects介绍与使用
    【转】SQL Server 2008 事件探查器(SQL SERVER Profiler)
    SQL 常用语句
    网页开发 组件
    中文版的jqGrid实例大全
  • 原文地址:https://www.cnblogs.com/w1-y2-q5/p/9238570.html
Copyright © 2011-2022 走看看