BootStrap selectpicker后台动态绑定数据

项目使用BootStrap设置select时，不能动态加载，使用以下方法可以解决。

//获得全部订单信息(订单ID,订单名称)
function GetAllOrders(obj) {
 $.ajax({
  type: 'Get',
  url: '/OrderTypeSetting/GetAllCanUseOrderTypes/',
  dataType: "Json",
  success: function (data) {
   if (!data.flag) {
    $.each(data, function (i, n) {
     $("#" + obj).append(" <option value=\"" + n.os_id + "\">" + n.os_name + "</option>");
    })
    $("#" + obj).selectpicker('refresh');

   }
  }
 })

}

//获得全部订单信息(订单ID,订单名称)
function GetAllOrders(obj) {
 $.ajax({
  type: 'Get',
  url: '/OrderTypeSetting/GetAllCanUseOrderTypes/',
  dataType: "Json",
  success: function (data) {
   if (!data.flag) {
    var opstr = "";
    $.each(data, function (i, n) {
      opstr += " <option value=\"" + n.os_id + "\">" + n.os_name + "</option>";
    })
    var myobj = document.getElementById(obj);
    if (myobj.options.length == 0) {
     $("#" + obj).html(opstr);
     $("#" + obj).selectpicker('refresh');
    }
   }
  }
 })

}

参考资料：

bootstrap-select

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • BootStrap selectpicker

    BootStrap selectpicker

    mark 一下使用 bootstrap selectpicker 遇到的一个小issue,作为下次查错使用 $('.selectpicker').selectpicker('val', 'Mustard');//单选 $('.selectpicker').selectpicker('val', ['Mustard','Relish']);//多选$('.selectpicker').selectpicker('refresh'); 可以刷新显示 mark一下问题:设置的val必须为option里

  • BootStrap selectpicker后台动态绑定数据的方法

    本文为大家分享了BootStrap selectpicker后台动态绑定数据的方法,供大家参考,具体内容如下 html部分代码 <select class="selectpicker" multiple> </select> 这是一个下拉多选框,现在要动态往里添加下拉选项. js代码 <script type="text/javascript"> getOption(); function getOption(){ $.ajax(

  • BootStrap selectpicker后台动态绑定数据

    项目使用BootStrap设置select时,不能动态加载,使用以下方法可以解决. //获得全部订单信息(订单ID,订单名称) function GetAllOrders(obj) { $.ajax({ type: 'Get', url: '/OrderTypeSetting/GetAllCanUseOrderTypes/', dataType: "Json", success: function (data) { if (!data.flag) { $.each(data, func

  • 利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表

    利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表

    jQuery dataTables 插件是一个优秀的表格插件,是后台工程师的福音!它提供了针对数据表格的排序.浏览器分页.服务器分页.查询.格式化等功能.dataTables 官网也提供了大量的演示和详细的文档进行说明,为了方便使用,这里进行详细说明. 去官网:https://www.datatables.net/ 下载最新版本是v1.10.12. 在页面引入: <link rel="stylesheet" href="~/Content_Admin/css/boots

  • 微信小程序 动态绑定数据及动态事件处理

    微信小程序 动态绑定数据及动态事件处理 关键核心代码 <image class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}" src="{{item.imgurl}}" mode="scaleToFill" bindtap="

  • BootStrap Table 后台数据绑定、特殊列处理、排序功能

    本节主要介绍Bootstrap的后台数据绑定.特殊列处理及列的排序功能 1.数据绑定 一般做程序设计,很少是使用json文件直接绑定数据.基本上我们都是使用编程语言进行数据获取,并做数据绑定. 放置一个Table控件 <table id="table" ></table> 调用javascript的代码 <script > $('#table').bootstrapTable({ url: 'tablejson.jsp', //数据绑定,后台的数据从

  • Bootbox将后台JSON数据填充Form表单的实例代码

    序言: 刚结束公司的三个月试用期,意味着我即将正式步入社会成为广大从事IT行业的一员.作为一个编程小白,无论从技术层面还是知识层面都是比较薄弱的,想要成为一个优秀的程序员不断的学习与探索是不可避免的.我相信一切的付出与收获是成正比的!Fighting! 这几天在做公司的实际项目的时候,需要实现选中Bootstrap table中的任意一行数据点击编辑按钮弹出一个模态框以表单的形式对该行数据进行编辑.获取表格行的数据是比较方便的,具体可以查找Bootstrap table参考文档,具体地址可以直接

  • jQuery Ajax实现Select多级关联动态绑定数据的实例代码

    jQuery选择插件分为基本版和美化版,重点说下美化版,如下图所示: 相比最原始的版本,美化后的选择插件可以说是很漂亮了且功能更加强大(这里不说了,自行发掘吧).这里主要是添加了它的特有属性并调用 class="chzn-select": jsp页面: <select class="chzn-select" id="CODE" name="CODE"> ...... </select> js页面: $(

  • 关于Ajax中通过response在后台传递数据问题

    这是js代码: var System = { getHttpRequest: function(url, callback, options) { if (url.length < 0) return; var option = { url: url, type: "get", dataType: "json", cache: false, timeout: 30000, beforeSend: function(XHR) { }, complete: fun

  • herf=#导致Ajax请求时没有向后台发送数据

    今天在做右键菜单,当点击重命名进行Ajax请求时,并没有向后台发送数据而是直接跳转到了首页.朕百思不得其解,后来在前台页面发现一个问题: 复制代码 代码如下: <span style="font-size:24px;"><li><a href='#' onclick="renameContactsFunction()">重命名</a></li></span> 原来就是这个herf='#'惹的祸.

随机推荐