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 += '' 
                                    for(a in device_name){
                                     html += '' + device_name[a].device_name+ ''
                }
                                    html += ''
                                    }
                                      $('#Storage_pool').append(html);  
                                            // 缺一不可
							        $('#Storage_pool').selectpicker('refresh');
							        $('#Storage_pool').selectpicker('render');
                                }
                            });
                            });
                            
                            
					</script>

				</div>

要点:

1. 记得导入 bootstrap-select.js
2. multiple 搭配 data-max-options=“1” 使用，multiple让整个select可以多选，data-max-options限制分组以后多选的数量。
3. 通过循环把数据放在select里面
4. 通过AJAX把数据拿过来，url 为 “/sp” ，自己设定即可
5. 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'}]
                }]