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 相关文章推荐
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
JS实现轮播图效果
Jan 11 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
php之XML转数组函数的详解
2013/06/07 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
layui table 参数设置方法
2018/08/14 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
Python2/3中urllib库的一些常见用法
2017/12/19 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
python 求10个数的平均数实例
2019/12/16 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
一些PHP的面试题
2015/05/06 面试题
如何提高MySql的安全性
2014/06/19 面试题
节约电力资源的建议书
2014/03/12 职场文书
党员创先争优承诺书
2014/03/26 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
营业用房租赁协议书
2014/11/26 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
银行服务理念口号
2015/12/25 职场文书
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python