Lista rozwijalna <select, option, optgroup>

Lista rozwijalna <select, option, optgroup>

<form action="...">
	<select name="nazwa">
		<option>Tu wpisz pierwszą możliwość</option>
		<option>Tu wpisz drugą możliwość</option>
		(...)
	</select>
</form>

Jeśli chcemy, aby w formularzu zostały przesłane inne wartości niż treść znaczników <option>...</option>, można wprowadzić dla tych znaczników dodatkowe atrybuty value="wartość". Ich treść może się różnić od tekstu wpisanego po znaczniku <option>...</option>. Atrybuty value="..." są obowiązkowe, jeśli zamierzamy wykorzystać formularz w skrypcie.

Polecenie pozwala wprowadzić listę rozwijalną (menu) - inaczej zwaną również polem kombi - z której możemy wybrać jedną (typ podstawowy) lub kilka możliwości (typ rozszerzony) - za pomocą klawisza Ctrl. Każdy znacznik <option>...</option> odpowiada jednej opcji na liście. Możliwe jest oczywiście wprowadzenie więcej niż dwóch opcji wyboru (w miejsce kropek).

UWAGA! W zawartości elementu OPTION nie można wpisywać żadnych znaczników.

Przykład <select, option>

Zwróć uwagę, że po kliknięciu tego pola, rozwija się menu, z którego możesz wybrać jedną z kilku opcji.

Możliwość wyboru kilku opcji (typ rozszerzony) <select multiple>

<select name="nazwa" multiple>
	<option>Tu wpisz pierwszą możliwość</option>
	<option>Tu wpisz drugą możliwość</option>
</select>

Dla zaawansowanych
Aby odebrać wszystkie zaznaczone opcje w skrypcie PHP, jako nazwę pola można wpisać: name="nazwa[]". W takim przypadku w skrypcie będzie dostępna tablica $nazwa ($_POST['nazwa'] lub $_GET['nazwa']), a wartości kolejnych zaznaczonych opcji (tylko zaznaczonych), będzie można odczytać poprzez użycie: $nazwa[0], $nazwa[1], $nazwa[2] ($_POST['nazwa'][0], $_POST['nazwa'][1], $_POST['nazwa'][2] albo $_GET['nazwa'][0], $_GET['nazwa'][1], $_GET['nazwa'][2]) itd. (w zależności ile opcji zostanie zaznaczonych).

Przykład <select multiple, option>

Dodatkowe możliwości wybiera się trzymając wciśnięty klawisz Ctrl ("Control") lub przeciągając myszką:

Z zaznaczoną domyślnie opcją <option selected>

<select name="nazwa">
	<option>Tu wpisz pierwszą możliwość</option>
	<option selected>Tu wpisz drugą możliwość<option>
</select>

Aby można było zaznaczyć kilka opcji domyślnych, koniecznie należy zastosować typ rozszerzony (MULTIPLE)!

Przykład <select, select multiple, option selected>

Zwróć uwagę, że w poniższym "okienku" jest zaznaczona domyślnie Możliwość 2, a nie jak poprzednio Możliwość 1:

O określonej wysokości pola <select size>

<select name="nazwa" size="w">
	<option>Tu wpisz pierwszą możliwość</option>
	<option>Tu wpisz drugą możliwość</option>
</select>

Przykład <select size, option>

Zauważ, że jeśli wysokość pola jest większa niż ilość opcji, to nie pojawia się suwak do jego przewijania:

Blokada pola <select disabled>

<select name="nazwa" disabled>
	<option>Tu wpisz pierwszą możliwość</option>
	<option>Tu wpisz drugą możliwość</option>
</select>

Wstawienie atrybutu disabled powoduje zablokowanie pola.

UWAGA!
Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.

Przykład <select disabled, option, option selected>

Grupy opcji <optgroup>

<select name="nazwa">
<optgroup label="nazwa grupy">
	<option>Tu wpisz pierwszą możliwość</option>
	<option>Tu wpisz drugą możliwość</option>
</optgroup>
</select>

Czasem zachodzi potrzeba wizualnego zgrupowania kilku opcji listy rozwijalnej. Można oczywiście próbować wstawiać pomiędzy kolejne grupy znaczniki OPTION zawierające np. kilka znaków myślnika lub po prostu pustą zawartość. Niestety opcje takie tak naprawdę niczym nie będą różniły się od pozostałych, tzn. będzie je można normalnie wybrać. Można jednak dokonać grupowania za pomocą osobnego znacznika OPTGROUP. Pojawi się on w postaci nagłówka nad opcjami, które zawiera. Będzie wyróżniony wizualnie i nie będzie możliwe jego wybranie. Jedna lista rozwijalna może zawierać dowolną liczbę grup opcji, ale nie można ich zagnieżdżać, tzn. umieszczać jednej grupy wewnątrz innej.

Wygląd nagłówka grupy opcji może różnić się w zależności od przeglądarki. Na przykład może zostać on wyświetlony czcionką pogrubioną, pochyloną albo wyróżniony w jeszcze inny sposób.

Przykład <select, optgroup, option>

Rozwiń listę, aby zobaczyć grupy opcji (zwróć uwagę, że nie możesz wybrać nagłówka grupy):

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<optgroup>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<optgroup disabled>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<optgroup label>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<option>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<option disabled>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<option label>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<option selected>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<option value>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<select>	1 2008-12-11	1 2004-11-09	12 2015-07-29	2 1996-07-14	1 2003-06-23
<select disabled>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26
<select form>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26
<select multiple>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26
<select name>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26
<select size>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26