xml地图|网站地图|网站标签 [设为首页] [加入收藏]

皇家88平台js下拉框使用小结,Select2在使用ajax获

来源:http://www.ccidsi.com 作者:集成经验 人气:173 发布时间:2019-06-05
摘要:若是作者需求在自身的select第22中学暗许增加2个在此以前从服务器上得到过的数码,通过以下方法实现。实地衡量可行~ Select二.js下拉框使用小结,select二.js下拉框 用了这么久的Select贰

若是作者需求在自身的select第22中学暗许增加2个在此以前从服务器上得到过的数码,通过以下方法实现。实地衡量可行~

Select二.js下拉框使用小结,select二.js下拉框

用了这么久的Select贰插件,也该写篇小说总括总计。当初倍感Select2不是专程好用,但又找不到比它更加好的下拉框插件。

在自己的纪念里Select二有二个版本,最新版本有部分新的特色,并且更新了一下情势参数,比最初版本要雅观一些,本文针对新本子。

官网:

演示:

皇家88平台 1

是因为博客系统的来头,所以只可以演示轻便的功用。

一.文件必要引进select2.full.js、select2.min.css(四.0.壹版本)和jquery.一.8.3及以上

新型版本的select二举例引用的jquery版本十分低的话,有个别作用不恐怕不荒谬使用。比如:清除功用allowClear: true

新式版本请使用<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
})

4.加载远程数据

$("#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 
});

说明:

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

     贰.processResults中results: data再次回到数据(重返最终数额给results,假诺自己的数码在data.res下,则赶回data.res。那么些与服务器重回json有关)

     三.minimumInputLength 微细需求输入多少个字符才举办询问,与之相关的maximumSelectionLength表示最大输入限制。

     4.escape马克up字符转义管理

     五.templateResult再次回到结果回调function formatRepo(repo){return repo.text},那样就足以将回到结果的的text呈现到下拉框里,当然你能够return repo.text "壹";等

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

     七.关于重临的 json的格式:select二暗许json格式为[{id:1,text:'text'},{id:2,text:'text'}],新版严酷需求那样的格式,当然你能够增加列,如:[{id:1,text:'text',name:'liu'}]

皇家88平台,5.获取选中项

var res=$("#c01-select").select2("data")[0] ; //单选
var reslist=$("#c01-select").select2("data"); //多选
if(res==undefined)
{
  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);//不可用

7.启用多选

$("#c01-select").select2({
 data:data,
 multiple: true
});

多选演示:

皇家88平台 2

八.底下轻巧表明新版与老版相比较

一.结实回调养当选回调名称:formatResult、formatSelection(老版);templateResult、templateSelection(新版)

2.初始化:

//老版,注意如果初始化时文本框中本身没有值(为空),则不会触发该方法
initSelection: function (element, callback) {
 var id = $(element).val();
 var data = { id: id, text: id};//这里是初始化的数据,你可以通过id来从服务器上获取(ajax),再装载进去
 callback(data);
}

//新版,直接给select添加option
$("#id").append(new Option("Jquery", 10001, false, true));
//或者
$("#id").append("<option value='10001'>Jquery</option>");

三.到手或设置值:select贰("val")(老版);$("select").val()(新版)

推荐使用

var res = $("#id").select2("data");
//返回数组,单选就取res[0];好处是不进可以获取id、text还可以获取其他属性,如res[0].names

4.停用或启用:$("select").enable(false);(老版);$("select").prop("disabled", true);(新版)

5.宗旨样式:新版的体制已经更新,但万一想选取老版样式则足以安装 theme: "classic"

如上正是本文的全体内容,希望对我们的读书抱有扶助,也指望大家多多扶助帮客之家。

用了这么久的Select二插件,也该写篇作品总括计算。当初感到Select二不是相当好用,但又找不到比它...

用了这么久的Select贰插件,也该写篇小说总括总结。当初感到Select二不是特地好用,但又找不到比它更加好的下拉框插件。

var value = 1
var text = '默认文本'
$('.selecter').html('<option value="'   value   '">'   text   '</option>').trigger("change")

在自身的回想里Select二有叁个本子,最新版本有一点点新的特点,并且更新了一下措施参数,比最初版本要赏心悦目一些,本文针对新本子。

如上代码其实正是将class="selecter"的select内容打开重新定义,最终提示select2更新。

官网:

那篇Select贰在行使ajax获取远程数据时显示暗中同意数据的措施就是笔者分享给我们的全体内容了,希望能给大家2个参照,也冀望咱们多多援救脚本之家。

演示:

你大概感兴趣的作品:

  • Select贰.js下拉框使用小结
  • jquery中应用ajax获取远程页面新闻
  • jquery select二的采纳体验(推荐)
  • bootstrap select二插件用ajax来获得和彰显数据的实例
  • select贰 ajax 设置暗中认可值,初叶值的主意

皇家88平台 3

是因为博客系统的因由,所以只可以演示轻易的效益。

1.文件要求引进select2.full.js、select二.min.css(四.0.壹本子)和jquery.一.8.3及以上

最新版本的select②假使引用的jquery版本非常的低的话,有个别意义无法平常使用。比如:清除功能allowClear: true

流行版本请使用<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
})

4.加载远程数据

本文由68399皇家赌场发布于集成经验,转载请注明出处:皇家88平台js下拉框使用小结,Select2在使用ajax获

关键词: 68399皇家赌场

最火资讯