select下拉框分組使用bootstrap select

HTML5 <optgroup>標簽用來定義一個選項組，即，可以將文檔中的選項進行組合。

select標簽使用<optgroup>分組：

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select> 

效果如圖：

 

 

 

不太美觀，可以使用bootstrap select，asp.net mvc core的cshtml頁面動態加載如下（引用對應css和js后，class增加selectpicker，data-live-search是否使用模糊搜索框）：

<select class="form-control selectpicker" data-live-search="true">
    <option selected="selected">請選擇</option>
    @{
        if (list != null)
        {
            var firstlist = list.Where(o => o.Pid == null).ToList();
            if (firstlist?.Count > 0)
            {
                @foreach (var item in firstlist)
                {
                    var sublist = list.Where(o => o.Pid != null && o.Pid == item.Id).ToList();
                    <optgroup label="@item.Name">
                        @if (sublist?.Count > 0)
                        {
                            @foreach (var subitem in sublist)
                            {
                                <option value="@subitem.Id">@subitem.Name</option>
                            }
                        }
                    </optgroup>
                }
            }
       }
    }
</select>                

效果如下：

 

 

參考：

select動態分組（這個用的select2）：https://blog.csdn.net/torpidcat/article/details/103785353

<optgroup>標簽解釋和效果：https://www.w3cschool.cn/html5/html5-optgroup.html