Как сделать название у select?

Question

[WQP]

Имеется список:

<select onchange="document.getElementById('select-seria').src=this.options[this.selectedIndex].value;"> 
<option>Выбор качества</option> 
<option value="....">270</option> 
<option value="....">360</option> 
<option value="....">480</option> 
</select>

Для оглавления сделано:
<option>Выбор качества</option>
Но при его выборе у меня происходит ошибка. Как сделать так чтобы при открытии select не было элемента <option>Выбор качества</option>

Answer 1

[Flashduck]

Использовать hidden

<option  hidden>Выбор качества</option> 
<option value="....">270</option> 
<option value="....">360</option> 
<option value="....">480</option>

Comments

[Cantadora]

Cпасибо, у меня такая же проблема была, теперь всё ок)

Answer 2

[Назар Мокринский]

Два варианта:
<optgroup>Выбор качества</optgroup>
<option disabled>Выбор качества</option>

Comments

[vdem]

optgroup не решает проблему вообще, в FF и Хроме вообще не отображается "Выбор качества", option disabled да, не дает выбрать опцию, но отображает ее в выпадающем списке.

Answer 3

[vdem]

Еще вариант:

<option style="display: none;">Выбор качества</option>

Само собой, лучше объявить класс .hidden в стилях и указывать здесь класс, а не писать inline-стиль.
UPD: Проверьте в IE, в старых версиях точно не срабатывало.