<select id="prd_tech_for_load" class="selectable" style="width:180px;">
</select>

不需要分页时,直接在select内添加option列表

如果要分页的话

$(function () {
$("#prd_tech_for_load").select2();
var sel_tech = $("#prd_tech_for_load").select2({
placeholder: abp.localization.values['ICT'].SelTechReq,
ajax: {
url: '../PDE/GetProductList',
dataType: 'json',
delay: 250,
data: function (params) {
return {
queryText: params.term // search term
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.result.data,
pagination: {
more: 1 < data.totalPages
}
};
},
cache: true
},
//disabled: true,
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 0,
templateResult: function (item) { // 显示查询结果
var display = '';
if (item.technology != null) display += item.technology;
//if (item.customerName != null) display += '(' + item.customerName + ')';
return display;
},
templateSelection: function (item) { // 显示选中的对象
var display = '';
if (item.technology != null) display += item.technology;
if (item.customerName != null) display += '(' + item.customerName + ')';
return display || item.text;
}
}); sel_tech.on("select2:select", function (e) {
defaultVue.ProductID = e.params.data.productId;
});
});

这里要注意的一个问题是,后台返回的数据列表必须含有id这个字段,不然会出现问题,一直不能选中数据。

这个不知道的人,被坑死了!

select2插件的使用的更多相关文章

  1. select2插件

    引入select2插件<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min. ...

  2. 基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用

    在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用>介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外 ...

  3. Metronic_下拉列表Select2插件的使用

    这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://select2.github.io/,具体的使用案例,可以参考地址:https:// ...

  4. jQuery的下拉选select2插件用法

    1转自:https://www.jb51.net/article/95561.htm 用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉 ...

  5. select2插件用法

    1.修改默认查询方法,使其可以根据value查询 this.element.select2({ allowClear: true, matcher: function (term, text, ele ...

  6. Select2插件的隐藏、设置宽度

    <select id="selPrinvice" class="Select2 select2-hidden-accessible" style=&quo ...

  7. 01:jQuery的下拉选select2插件用法

    1.1 select2插件基本使用 1.下载select2插件 1. 下载地址:https://github.com/select2/select2 2.官网地址:https://select2.or ...

  8. select2插件使用小记2 - 多选联动 - 笔记

    这是select2插件使用的第二篇,可参考第一篇 select2插件使用小记.上一篇主要是关于基本的使用,这篇主要是关于多选,及联动的.侧重点不同. 效果图如下: 遵从W3C标准:结构.样式.行为.以 ...

  9. 在select2插件中append下拉选,点击没反应的解决

    今天前端大佬帮我解决了一个棘手的问题:克隆了已有系统的网页,尝试把复制下来的html改造成jsp.基本功能正常,然而点击新增按钮,出来的行无法点击下拉选,控制台也没报错. 项目用的是jeesite2. ...

  10. select2 插件

    官网:http://select2.github.io/ Select2是基于jQuery的一个插件,没有引用jQuery,是没有效果的   1.在实现给select2添加placeholder效果的 ...

随机推荐

  1. Extjs tree的相关方法及配置项

    Ext.tree.TreePanel       主要配置项:             root:树的根节点.             rootVisible:是否显示根节点,默认为true.     ...

  2. 『备忘』HttpWebRequest 在 POST 提交时, 标头(Headers)丢失原因

    近来研究 HttpWebRequest —— 辅助类完成时,POST JSON数据 总会 丢失标头(Headers). HttpWebRequest POST JSON数据,分如下几步: > 将 ...

  3. 【HDU】1847 Good Luck in CET-4 Everybody!

    http://acm.hdu.edu.cn/showproblem.php?pid=1847 题意:同nim..不过只有一堆..每次取2的幂次..即1.2.4....等,n<=1000 #inc ...

  4. spring源码学习之路---IOC容器初始化要义之bean定义载入(五)

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 最近工作很忙,时间不多,研究 ...

  5. PHP Pthread多线程 操作

    <?php class vote extends Thread { public $res = ''; public $url = array(); public $name = ''; pub ...

  6. 关于C# WinForm 边框阴影窗体(一)

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  7. Android自定义键盘

    布局文件 <?xml version="1.0" encoding="UTF-8"?> <Keyboard android:keyWidth= ...

  8. BizTalk开发系列(三十三)BizTalk之Excel终极解决方案

    Excel作为优秀的客户端数据处理程序得到了广泛的应用. 由于其简单又强大的功能在很多公司或个人的数据处理中占用非常重要的位置. 而BizTalk作为微软的SOA主打产品虽然免费提供了很多Adapte ...

  9. c++之map

    题目描述:     哈利波特在魔法学校的必修课之一就是学习魔咒.据说魔法世界有100000种不同的魔咒,哈利很难全部记住,但是为了对抗强敌,他必须在危急时刻能够调用任何一个需要的魔咒,所以他需要你的帮 ...

  10. Android课程---课下练习(表格、线性和相对布局)

    1.表格布局 练习代码: <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns: ...