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文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
js获取ip和地区
Mar 10 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
layui分页效果实现代码
May 19 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 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学习之正则表达式
2011/04/17 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
python中的错误处理
2016/04/10 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
美国在线工具商店:Acme Tools
2018/06/26 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
英语系毕业生自荐信
2013/10/31 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
行政二审代理词
2015/05/25 职场文书
银行求职信范文
2019/05/13 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python