bootstrap动态调用select下拉框

最新推荐文章于 2025-06-04 09:09:49 发布

原创最新推荐文章于 2025-06-04 09:09:49 发布 · 1.1w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #select

JS 同时被 2 个专栏收录

11 篇文章

订阅专栏

bootstrap

6 篇文章

订阅专栏

这篇博客介绍了如何在HTML页面中利用Bootstrap的selectpicker组件动态加载下拉选择框的内容。通过AJAX从服务器获取数据，遍历JSON响应，将每个部门信息转化为<option>标签并添加到<select>元素中，最后使用selectpicker的刷新方法更新界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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");
  }  
});  
}

这样就可以了