1. <script src="~/Scripts/jquery-1.10.2.js"></script>
  2.  
  3. <script src="~/Content/bootstrap/js/bootstrap.js"></script>
  4. <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  5.  
  6. <script src="~/Content/select2-master/dist/js/select2.js"></script>
  7. <link href="~/Content/select2-master/dist/css/select2.css" rel="stylesheet" />
  1. function loadAssetNameOrVersion(displayText) {
  2. displayText = displayText || "请选择";
  3. $("#asset_nameOrVersion").select2({
  4. placeholder: displayText,//默认显示
  5. minimumInputLength: 0,//输入多少长度的值的时候执行后台请求查询
  6. //选中事件(选中后显示的值)
  7. formatSelection: function (object) {
  8. return object.assetName + "/" + object.productName;
  9. },
  10. //显示的值(加载的在下拉框的值)
  11. formatResult: function (object) {
  12. return object.assetName + "/" + object.productName;
  13. },
  14. id: function (data) {//选中后取的值
  15. return data.productId;
  16. },
  17. ajax: {
  18. url: "/api/services/app/asset/GetOfficeProductsByKey",
  19. dataType: "json",
  20. params: {
  21. contentType: 'application/json'//此处可修改contentType类型(这个地方坑了我好久,不知道还要加params包起来)
  22. },
  23. type: "post",//请求类型
  24. data: function (term, page) {//传给后台的参数,可自行构造
  25. return JSON.stringify({
  26. prefix: term,
  27. limit: 4,
  28. page: page,
  29. });
  30. },
  31. results: function (data, page, query) { //请求成功,接收返回值
  32. var more = (page * 4) < data.result.totalCount;
  33. return { results: data.result.items, more: more };
  34. },
  35. }
  36. });
  37. }

可下拉搜索,下拉分页,还是比较强大的!

【笔记】select2的使用的更多相关文章

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

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

  2. select2插件+ajax笔记

    目录 手册 思路 1. 如果是自己写的ajax这样就可以了. html里 控制器里 2. 如果是ecshop里,需要改写call方法为JQuery的ajax方法,才可以select2需要JQuery支 ...

  3. jquery Select2 学习笔记之中文提示 - CSDN博客

    首先学习这个东西呢,还是看官网比较全面 select2官网例子 要select2中文显示:必须要引入中文包,且一定要放在select2.js之后 [javascript] view plain cop ...

  4. Java开发笔记(六十三)双冒号标记的方法引用

    前面介绍了如何自己定义函数式接口,本文接续函数式接口的实现原理,阐述它在数组处理中的实际应用.数组工具Arrays提供了sort方法用于数组元素排序,可是并未提供更丰富的数组加工操作,比如从某个字符串 ...

  5. jQuery整理笔记七----几个经典表单应用

    1.文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,仅仅是一个小技巧,能够提高用户体验. <!DOCTYPE html PUBLIC "-//W3C ...

  6. amazeui学习笔记一(开始使用5)--藏品collections

    amazeui学习笔记一(开始使用5)--藏品collections 一.总结 1.藏品collections:一些 Amaze UI 中没有的功能.amazeui认为好的解决方案.像图表绘制里面的百 ...

  7. Laravel Vuejs 实战:开发知乎 (10)使用 Select2 优化话题选择

    1.添加选择Topic 使用Select2,如何安装Select2 ,具体使用实例 Select2 and Laravel: Ajax Autocomplete 及 Loading data remo ...

  8. git-简单流程(学习笔记)

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

  9. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. struts2 xml中重定向

    <result name="success" type="redirect">ManagePartAction</result> 重定向 ...

  2. 优雅的设计单线程范围内的数据共享(ThreadLocal)

    单线程范围内数据共享使用ThreadLocal /** * @Description TODO * @author zhanghw@chinatelecom.cn * @since 2015年12月1 ...

  3. 让 Terminal/vim 使用 Solarized 配色

    经过亲身体验,终于使用上了solarized的配色,之前配出来相差太多,于是找到这篇参考博文:http://blog.csdn.net/angle_birds/article/details/1169 ...

  4. Python 之Django

    1.安装Django(下载慢的时候用MaxVPN) pip3 install django 2.Django处理流程 新建project(mysite),执行dj(mysite),然后在console ...

  5. javascript 面向对象编程指南 的一些题目

    1. function C () { this.a = 1; return false; } console.log (typeof new C()); object function C () { ...

  6. 随笔—邀请赛前训— Codeforces Round #330 (Div. 2) B题

    题意: 这道英文题的题意稍稍有点复杂. 找长度为n的数字序列有多少种.这个序列可以分为n/k段,每段k个数字.k个数可以变成一个十进制的数Xi.要求对这每n/k个数,剔除Xi可被ai整除的情况,剔除X ...

  7. Web前端之html_day2

    1.meta标签 1 2 3 <metacharset="UTF-8"/> <metaname="Keywords" content=&quo ...

  8. codevs 1163 访问艺术馆

    1163 访问艺术馆  时间限制: 1 s  空间限制: 128000 KB       题目描述 Description 皮尔是一个出了名的盗画者,他经过数月的精心准备,打算到艺术馆盗画.艺术馆的结 ...

  9. java根据逗号分隔字符串,后加上单引号

    public class SpiltString { public String spilt(String str) {  StringBuffer sb = new StringBuffer();  ...

  10. javascript 的 clientX用法

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...