как организовать окно выбора

Question

У меня есть простой выпадающий с большим количеством этнических групп

<select name="ethnicity" onchange="document.getElementById('actor').value='value1'" style= 
       "width: 180px;"> 
       <option value="Whiteg"> 
        german 
       </option> 

       <option value="italian"> 
        italian 
       </option> 

       // + 100 more ethnicities 
       </select> 

Я хочу организовать выпадающий в одной капле вниз, но я хотел бы иметь полужирную категорию в между так что вместо падения вниз глядя, как

немецкого
итальянского
мексиканской
корейское

это будет выглядеть

Белый
немецкого
итальянский
азиатский
корейских
вьетнамцы

и т.д. ETCC

как бы я это сделать?

Answer 1

Вы должны попробовать

<select> 
    <optgroup label="White"> 
    <option value="german">german</option> 
    <option value="italian">italian</option> 
    </optgroup> 
    <optgroup label="Asian "> 
    <option value="korean ">korean </option> 
    <option value="vietnamese">vietnamese</option> 
    </optgroup> 
</select>