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 相关文章推荐
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
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
Thinkphp5行为使用方法汇总
2017/12/21 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python科学计算环境推荐——Anaconda
2014/06/30 Python
python模拟鼠标拖动操作的方法
2015/03/11 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
Python简单实现区域生长方式
2020/01/16 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
简单的项目建议书模板
2014/03/12 职场文书
学生会主席演讲稿
2014/04/25 职场文书
市场营销工作计划书
2014/05/06 职场文书
迎国庆演讲稿
2014/09/05 职场文书
初中毕业生自我评价
2015/03/02 职场文书
感恩教育观后感
2015/06/17 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android
python playwrigh框架入门安装使用
2022/07/23 Python