设为首页收藏本站

 找回密码
 注册论坛

QQ登录

只需一步,快速开始

用百度帐号登录

只需两步,快速登录

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 407|回复: 0

Select2.js下拉框使用小结

[复制链接]

签到天数: 36 天

[LV.5]常住居民I

发表于 2016/11/11 10:56 | 显示全部楼层 |阅读模式 |搜狗浏览器|Windows 7
天涯海角搜一下: 百度 谷歌 360 搜狗 有道 雅虎 必应 即刻
  最新版本请使用<select></select>标签(对于本地化的数据你可以使用input,但ajax远程数据必须使用select)

  二。placeholder

  placeholder占位提示文字,如果需要清楚功能,则必须设置placeholder。

  三。加载本地数据

  select2默认的数据属性是id、text,新版本可以自定义,但还是用默认的比较好。所以提供的json中最好转换为id、text形式,当然可以添加其他属性。

  var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

  $("#c01-select")。select2({

  data: data,

  placeholder:'请选择',

  allowClear:true

  })

  四。加载远程数据

  $("#c01-select")。select2({

  ajax: {

  url: "data.json",

  dataType: 'json',

  delay: 250,

  data: function (params) {

  return {

  q: params.term,

  };

  },

  processResults: function (data) {

  return {

  results: data

  };

  },

  cache: true

  },

  escapeMarkup: function (markup) { return markup; },

  minimumInputLength: 1,

  templateResult: formatRepo,

  templateSelection: formatRepoSelection

  });

  说明:

  1.q: params.term 查询参数(params.term表示输入框中内容,q发生到服务器的参数名;所以这里你可以添加自定义参数,如:stype:'person')

  2.processResults中results: data返回数据(返回最终数据给results,如果我的数据在data.res下,则返回data.res。这个与服务器返回json有关)

  3.minimumInputLength 最小需要输入多少个字符才进行查询,与之相关的maximumSelectionLength表示最大输入限制。

  4.escapeMarkup字符转义处理

  5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里,当然你可以return repo.text+"1";等

  6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}

  7.关于返回的 json的格式:select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}],新版严格要求这样的格式,当然你可以添加列,如:[{id:1,text:'text',name:'liu'}]

  五。获取选中项

  var res=$("#c01-select")。select2("data")[0] ; //单选

  var reslist=$("#c01-select")。select2("data"); //多选

  if(res==undefined)

  {www.9ask.cn/zhuzhou/

  alert("你没有选中任何项");

  }

  if(reslist.length)

  {

  alert("你选中任何项");

  }

  六。清空选择项和设置不可用

  //清空选择

  $("#c01-select")。val(null)。trigger("change");

  $("#c01-select")。val("你的placeholder")。trigger("change");//或者

  //如果你使用的是input标签(默认就是本地数据),你可以用$("#c01-select")。val('');来清空选项

  //disabled

  $("#c01-select")。prop("disabled", false);//可用

  $("#c01-select")。prop("disabled", true);//不可用

  七。启用多选

  $("#c01-select")。select2({

  data:data,

  multiple: true
[发帖际遇]: 柠檬墨绿色 发帖时在路边捡到 3 樱币,偷偷放进了口袋. 幸运榜 / 衰神榜
欢迎光临IT技术交流论坛:http://bbs.itzmx.com/
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册论坛 用百度帐号登录新浪微博账号登陆

本版积分规则

手机版|Archiver|Mail me|网站地图|IT技术交流论坛 ( 闽ICP备13013206号-7 )

GMT+8, 2018/9/23 05:31 , Processed in 0.268551 second(s), 45 queries , Gzip On, Memcache On.

Powered by itzmx!

© 2011-2018 sakura

快速回复 返回顶部 返回列表