bootstrap动态调用select下拉框的实例代码

html代码：

<label for="classify" class="col-sm-2 control-label">填报部门：</label>
 <div class="col-sm-3">
 <select class="selectpicker form-control" data-live-search="true" name="addid" id="addid">
 </select>
 </div>

JS代码：

/*获取下拉菜单*/
function showSel(){
$.ajax({
  "type" : 'get',
  "url": 地址,
  "dataType" : "json",
  "success" : function(data) {
var depart_list = data.data;
var opts = "";
for( var depart_index = 0 ; depart_index < depart_list.length; depart_index++ ){
var depart = depart_list[depart_index];
opts += "<option value='"+需要加的.id+"'>"+显示的名称.name+"</option>";
}
// 查询界面
$("#addid").append(opts);
$("#addid").selectpicker("refresh");
 }
});
}

这样就可以了。

以上这篇bootstrap动态调用select下拉框的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于Bootstrap下拉框插件bootstrap-select使用方法详解

    基于Bootstrap下拉框插件bootstrap-select使用方法详解

    写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就是给一个它定义好的样式,就会给你展现出一个好看的组件出来,这个比liger-ui的界面做的要好,但是了解了Boostrap的基本语法后,发现在官方的文档中,并没有一些可以动态加载组件的demo,因为之前用的liger-ui,大多数组件都只需要写一行代码,就能很好的,并且很方便的直接与后台进行交互,并

  • Bootstrap框架下下拉框select搜索功能

    Bootstrap框架下下拉框select搜索功能

    之前用Easyui框架下做的下拉框选择,虽然可以搜索,但是有诸多的不便:比如,不能模糊匹配,必须按照第一个字母来搜索 心血来潮,想换个框架写后台,然后用Bootstrap搭了个架子,然后两种样式冲突,百度了一把,找到了另一个牛逼的基于Bootstrap下拉框搜索功能的js 不区分大小写,模糊匹配,哈哈,太棒了~~ 具体用法: <script type="text/javascript" src="<%=basePath%>/js/commons/jquery

  • BootStrap中关于Select下拉框选择触发事件及扩展

    BootStrap中关于Select下拉框选择触发事件及扩展

    Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项. 这个很好解决: 如下: <div class="page-header"> <div class="form-horizontal"> <div class="control-label col-lg-0"> </div> <div class="col-lg-2"> <

  • bootstrap中selectpicker下拉框使用方法实例

    bootstrap中selectpicker下拉框使用方法实例

    前言 最近一直在用bootstrap 的一些东西,写几篇博客记录下.... bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 下拉框的使用上基本操作一般是:单选.多选.模糊搜索.动态赋值等,下面来看如何使用: 使用方法如下 1.首先需要引入的css和js: bootstrap.css     bootstrap-sele

  • Bootstrap select多选下拉框实现代码

    Bootstrap select多选下拉框实现代码

    前言 项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没有中文的.对付看吧.有机会每个方法实践一下,会总结的.我自己也等着呢. 需要引用的它们 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cl

  • bootstrap动态调用select下拉框的实例代码

    html代码: <label for="classify" class="col-sm-2 control-label">填报部门:</label> <div class="col-sm-3"> <select class="selectpicker form-control" data-live-search="true" name="addid&quo

  • bootstrap里bootstrap动态加载下拉框的实例讲解

    实例如下所示: //引入的包 <!-- bootstrap --> <link rel="stylesheet" type="text/css" href="map/plug-in/scripts/bootstrap/bootstrap.min.css" rel="external nofollow" /> <link rel="stylesheet" type="t

  • Ajax获取php返回json数据动态生成select下拉框的实例

    功能:根据选择不同层次,在专业下拉框中动态生成对应分类的专业. HTML: <label>层次</label> <select name="level" id="level"> <option value="1">本科</option> <option value="2">高职(专科)</option> </select> <

  • jQGrid动态填充select下拉框的选项值(动态填充)

    本文给大家分享一段代码关于技巧jqgrid动态填充select 下拉框的选项值,非常不多说了,直接给大家贴代码了,具体代码如下所示: function gettypes(){ //动态生成select内容 var str=""; $.ajax({ type:"post", async:false, url:"checkpersontype", success:function(data){ if (data != null) { var json

  • JavaScript动态操作select下拉框

    JavaScript动态操作select下拉框

    相信在前端设计中必然不会少的了表单,因为经常会使用到下拉框选项,又或是把数据动态回显到下拉框中.因为之前牵扯到optgroup标签时遇到了问题,没查到太过详细的解决方案,自己动手操作记录一下. 首先就是咱们的老朋友"select"标签,因为需要js.jq两种操作,所以就定义两个select标签. HTML代码: <div style="width: 200px;height: 100px;margin: auto;margin-top: 100px;padding: 2

  • 原生JavaScript实现动态省市县三级联动下拉框菜单实例代码

    原生JavaScript实现动态省市县三级联动下拉框菜单实例代码

    像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl

  • jquery实现select下拉框美化特效代码分享

    jquery实现select下拉框美化特效代码分享

    这是一款基于jquery实现select下拉框美化特效代码,用户可以选择下拉菜单内容,是一款非常实用的特效源码.  为大家分享的jquery实现select下拉框美化特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/g.css" type="text/css&

  • jQuery操作选中select下拉框的值代码实例

    这篇文章主要介绍了jQuery操作选中select下拉框的值代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 js和jQuery联合操作dom真的很好用,如果不是专业前端人员的话,我觉得吧前端语言只要熟练掌握js和jQuery就可以了. 获取select下拉框的几种情况如下: 1.获取第一个option的值 $('#test option:first').val(); 2.最后一个option的值 $('#test option:last

  • jQuery中ztree 点击文本框弹出下拉框的实例代码

    废话不多说了,具体代码如下所示: <link rel="stylesheet" href="${ctx}/res/js/ztree/css/demo.css" type="text/css"/> <link rel="stylesheet" href="${ctx}/res/js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/cs

随机推荐