BootStrap select2 动态改变值的方法


Posted in Javascript onFebruary 10, 2017

1,selec2动态赋值

var temp=JSON.stringify({ id: "1|所有停车场", name: "所有停车场" });
$("#e_pid").attr("value", tempP);
              $("#e_pid").select2({
                placeholder: "查找停车场名称(多选)",
                language: "zh-CN",
                minimumInputLength: 1,
                allowClear: true,
                multiple: true,
                ajax: {
                  // instead of writing the function to execute the request we use Select2's convenient helper
                  url: "/manage/park/index/json/index",
                  dataType: 'json',
                  data: function (term, page) {
                    return {
                      parkName: term,// search term
                      powerpid: "1"
                    };
                  },
                  results: function (data, page) { // parse the results into the format expected by Select2.
                    // since we are using custom formatting functions we do not need to alter remote JSON data
                    for (var i = 0; i < data.length; i++) {
                      data[i].id = data[i].id+"|"+data[i].name;
                    };
                    data.push({ id: "577cb125f8d2c404572413d1|无", name: "无" });
                    return {
                      results: data
                    };
                  }
                },
                initSelection: function (element, callback) {
//赋初始值
                  // the input tag has a value attribute preloaded that points to a preselected movie's id
                  // this function resolves that id attribute to an object that select2 can render
                  // using its formatResult renderer - that way the movie name is shown preselected
                  var data = [];
                  var value = ""
                  var str = $(element).val().split('^');
                  for (var i = 0; i < str.length; i++) {
                    var temp = JSON.parse(str[i]);
                    value += temp.id + ",";
                    data.push(temp);
                  }
                  ;
                  value = value.substring(0, value.length - 1);
                  $(element).val(value);
                  callback(data);
                },
                formatSelection: function (item) {
                  return item.name;//注意此处的name,要和ajax返回数组的键值一样
                }, // 选择结果中的显示
                formatResult: function (item) {
                  return item.name;//注意此处的name
                },// 搜索列表中的显示
                dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
                escapeMarkup: function (m) {
                  return m;
                }
              });

2,动态改变值                                             

$("#e_pid").attr("value", temp);
                          $("#e_pid").trigger('change'); //动态改变值以后必须触发改变时间。否则将不会生效

以上所述是小编给大家介绍的BootStrap select2 动态改变值的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 对象成员的可见性说明
Oct 16 Javascript
js Dialog 实践分享
Oct 22 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
angularjs实现的前端分页控件示例
Feb 10 #Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 #Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 #Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 #Javascript
jQuery排序插件tableSorter使用方法
Feb 10 #Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 #Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 #Javascript
You might like
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
python实现人脸识别代码
2017/11/08 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
详解python中init方法和随机数方法
2019/03/13 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
学习十八大报告感言
2014/02/04 职场文书
代理班主任的自我评价
2014/02/04 职场文书
加薪通知
2015/04/25 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
四年级语文教学反思
2016/03/03 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers