• 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));

  • 相关阅读:
    网络故障排除工具 | 快速定位网络故障
    Brocade博科光纤交换机zone配置
    博科Brocade 300光纤交换机配置zone教程
    游戏开发
    第8章 图
    第7章 二叉树
    第6章 树型结构
    第5章 递归
    第4章 字符串、数组和特殊矩阵
    第3章 顺序表的链式存储
  • 原文地址:https://www.cnblogs.com/w1-y2-q5/p/9238570.html
Copyright © 2020-2023  润新知