Создание метки optgroup, выбранной в раскрывающемся списке

Question

Я планирую привести краткую страницу описания основного типа автомобиля (Swedish Cars). Я также хочу показать, что Volvo и Saab находятся под шведскими автомобилями в выпадающем списке. Затем, когда я нажимаю на Volvo, он должен перейти на страницу описания Volvo. Как я могу показать метку optgroup как выбранную изначально?

спасибо.

<select> 
    <optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    </optgroup> 
</select> 

Answer 1

Я считаю, что вы просите сделает так:

Это не строго возможно, как вы не можете «выбрать» метку опции группы. Чтобы получить эффект, который вы ищете, вам придется выполнить немного обмана.

Мы можем поставить пользовательские метки в span и абсолютно позиционировать этот промежуток над select сделать первоначальный выбор появляются в качестве метки опции группы. После этого нам нужно немного javascript, чтобы подделать событие click и change, в котором вы можете увидеть рабочий пример ниже. Тем не менее, это то, что ваш HTML будет выглядеть:

<div class="select-wrapper"> 
<span>Swedish Cars</span> 
<select> 
    <optgroup class="swe-car" label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    </optgroup> 
</select> 
</div> 

https://jsfiddle.net/atbqtnq8/

Answer 2

Другим решением было бы иметь первый вариант, такое же, как метка OPTGROUP, а затем скрыть его, когда выпадающий находится в фокусе.

<div class="select-wrapper"> 
<select> 
    <optgroup class="swe-car" label="Swedish Cars"> 
    <option value="swedish-cars">Swedish Cars</option> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    </optgroup> 
</select> 
</div> 

$().ready(function(){  
    $('select').focus(function(){ 
     $('select option').eq(0).hide(); 
    }); 
}); 

https://jsfiddle.net/atbqtnq8/13/