bootstrap select 动态数据+分组+分组单选

最新推荐文章于 2025-03-05 19:31:48 发布

Paul_Wen……

最新推荐文章于 2025-03-05 19:31:48 发布

阅读量1.7k

点赞数 1

分类专栏： Web前端文章标签： jquery ajax json python

本文链接：https://blog.youkuaiyun.com/wen_284334906/article/details/106135748

版权

Web前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在Bootstrap Select中实现动态数据加载、分组及分组单选功能。关键点包括：引入bootstrap-select.js库，利用multiple属性和data-max-options属性限制分组内的选择数量，通过循环将数据填充到select元素，并使用AJAX从'/sp'获取更多数据，数据结构需包含optgroup作为组名，option作为组内选项。

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

bootstrap select 动态数据+分组+分组单选


				<div class="form-group">
					<label class="col-sm-2 ">Storage pool</label>
					<div class="col-sm-10 ">
						<select id='Storage_pool' name='Storage_pool'
							class="selectpicker " multiple data-live-search="true">
						</select>
					</div>
					<script type="text/javascript">
					$('#Storage_pool').selectpicker({width:200});
				    $(function() {
                            $.ajax({
                                url: "/sp",
                                type: "get",
                                dataType: "json",
                                success: function(data) {
                                    //var _data = data.data; //由于后台传过来的json有个data，在此重命名
                                      $('#Storage_pool').html(""); 
                                    var html = "";
                                    for(i in data) {
                                    var NName = data[i].NodeName
                                    var device_name = data[i].Spool
                                html += '<optgroup data-max-options="1" label='+NName+'>' 
                                    for(a in device_name){
                                     html += '<option  value='+NName+'>' + device_name[a].device_name+ '</option>'
                }
                                    html += '</optgroup>'
                                    }
                                      $('#Storage_pool').append(html);  
                                            // 缺一不可
							        $('#Storage_pool').selectpicker('refresh');
							        $('#Storage_pool').selectpicker('render');
                                }
                            });
                            });
                            
                            
					</script>

				</div>

要点:

记得导入 bootstrap-select.js
multiple 搭配 data-max-options=“1” 使用，multiple让整个select可以多选，data-max-options限制分组以后多选的数量。
通过循环把数据放在select里面
通过AJAX把数据拿过来，url 为 “/sp” ，自己设定即可
optgroup 是组名，option是小组成员，记得层次

数据

 sp = [{'NodeName': 'Node1',
                    'Spool': [{'device_name': 'Paul'},
                             {'device_name': 'Mark'},
                             {'device_name': 'Ethan'},
                             {'device_name': 'Vince'}]
                  },
                  {'NodeName': 'Node2',
                  'Spool': [{'device_name': 'Paul_Test'},
                            { 'device_name': 'Mark_Test'},
                             {'device_name': 'Ethan_Test'},
                             {'device_name': 'Vince_Test'}]
                }]