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 相关文章推荐
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
AngularJS中的模块详解
Jan 29 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
javascript 易错知识点实例小结
Apr 25 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 array操作10个小技巧分享
2011/06/23 PHP
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
php删除指定目录的方法
2015/04/03 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
node后端服务保活的实现
2019/11/10 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python原始套接字编程示例分享
2014/02/21 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
Python中@property的理解和使用示例
2019/06/11 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
服务之星事迹材料
2014/05/03 职场文书
法律专业求职信
2014/05/24 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
对象析构函数__del__在Python中何时使用
2022/03/22 Python
openstack云计算keystone组件工作介绍
2022/04/20 Servers