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 相关文章推荐
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
js验证上传图片的方法
May 12 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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
如何写php程序?
2006/12/08 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
innerText 使用示例
2014/01/23 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
js获取url传值的方法
2015/12/18 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
jquery实现简单自动轮播图效果
2020/07/29 jQuery
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
python正则表达式re模块详解
2014/06/25 Python
Python with的用法
2014/08/22 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
python getopt模块使用实例解析
2019/12/18 Python
python画图常规设置方式
2020/03/05 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
教师自我评价范例
2013/09/24 职场文书
上课睡觉检讨书
2014/01/28 职场文书
《雾凇》教学反思
2014/02/17 职场文书
网络技术专业求职信
2014/05/02 职场文书
初三化学教学反思
2016/02/22 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js