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 相关文章推荐
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
Prototype Template对象 学习
Jul 19 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
Vue项目环境搭建详细总结
Sep 26 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
php抓取页面的几种方法详解
2013/06/17 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
Mac下安装vue
2018/04/11 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
angular 服务随记小结
2019/05/06 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
python语言的优势是什么
2020/06/17 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
行政部主管岗位职责
2013/12/28 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
工程项目合作意向书
2015/05/08 职场文书
小学班主任研修日志
2015/11/13 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
python3实现常见的排序算法(示例代码)
2021/07/04 Python
Ajax实现异步加载数据
2021/11/17 Javascript