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算法中的排序、数组去重详细概述
Oct 14 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
Angular4 Select选择改变事件的方法
Oct 09 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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
php实现求相对时间函数
2015/06/15 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
用原生js做单页应用
2017/01/17 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
python 输出上个月的月末日期实例
2018/04/11 Python
python版DDOS攻击脚本
2019/06/12 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
领导调研接待方案
2014/02/27 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
同事欢送会致辞
2015/07/31 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python