HTML
Sterowanie menu wyboru

Składnia

• <select name=""></select>
• <datalist id=""></datalist>
• <optgroup label="Option Group"></optgroup>
• <option value="">Option</option>

Wybierz menu

Element <select> generuje menu rozwijane, z którego użytkownik może wybrać opcję.

<select name="">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

Zmiana rozmiaru

Możesz zmienić rozmiar menu wyboru za pomocą atrybutu size . Rozmiar 0 lub 1 wyświetla standardowe menu stylu rozwijanego. Rozmiar większy niż 1 przekształci listę rozwijaną w pole wyświetlające tyle linii, z jedną opcją na linię i paskiem przewijania, aby przewijać dostępne opcje.

<select name="" size="4"></select>

Menu wyboru z wieloma opcjami

Domyślnie użytkownicy mogą wybrać tylko jedną opcję. Dodanie atrybutu multiple umożliwia użytkownikom wybranie wielu opcji jednocześnie i przesłanie wszystkich wybranych opcji za pomocą formularza. Użycie atrybutu multiple powoduje automatyczne przekształcenie menu rozwijanego w pole, tak jakby miało zdefiniowany rozmiar. Rozmiar domyślny, gdy to nastąpi, jest określany przez konkretną przeglądarkę, której używasz, i nie jest możliwe, aby zmienić go z powrotem na rozwijane menu stylu, umożliwiając jednocześnie wielokrotny wybór.

<select name="" multiple></select>

Podczas korzystania z atrybutu multiple istnieje różnica między użyciem wartości 0 i 1 dla rozmiaru, natomiast nie ma żadnej różnicy, gdy atrybut nie jest używany. Użycie 0 spowoduje, że przeglądarka będzie zachowywać się w dowolny domyślny sposób. Użycie 1 spowoduje jawne ustawienie rozmiaru wynikowego pola na wysokość tylko jednego wiersza.

Grupy opcji

Możesz starannie pogrupować opcje w menu wyboru, aby zapewnić bardziej uporządkowany układ na długiej liście opcji, używając elementu <optgroup> .

Składnia jest bardzo prosta, wystarczy użyć elementu z atrybutem label celu zidentyfikowania tytułu dla grupy i zawierającego zero lub więcej opcji, które powinny znajdować się w tej grupie.

<select name="">
  <option value="milk">Milk</option>
  <optgroup label="Fruits">
    <option value="banana">Bananas</option>
    <option value="strawberry">Strawberries</option>
  </optgroup>
  <optgroup label="Vegetables" disabled>
    <option value="carrot">Carrots</option>
    <option value="zucchini">Zucchini</option>
  </optgroup>
</select>

Podczas korzystania z grup opcji nie wszystkie opcje muszą być zawarte w grupie. Wyłączenie grupy opcji spowoduje również wyłączenie wszystkich opcji w grupie i ręczne ponowne włączenie pojedynczej opcji w wyłączonej grupie nie jest możliwe.

Opcje

Opcje w menu wyboru są tym, co wybierze użytkownik. Normalna składnia opcji jest następująca:

<option>Some Option</option>

Należy jednak zauważyć, że tekst wewnątrz samego elementu <option> nie zawsze jest używany i zasadniczo staje się wartością domyślną dla atrybutów, które nie są określone.

Atrybuty sterujące rzeczywistym wyglądem i funkcją opcji to value i label . Etykieta reprezentuje tekst, który zostanie wyświetlony w menu rozwijanym (to, na co patrzysz i klikniesz, aby je wybrać). Wartość reprezentuje tekst, który zostanie wysłany wraz ze złożeniem formularza. Jeśli jedna z tych wartości zostanie pominięta, zamiast tego zostanie użyty tekst wewnątrz elementu. Tak więc powyższy przykład można „rozszerzyć” na to:

<option label="Some Option" value="Some Option">

Zwróć uwagę na pominięcie tekstu wewnętrznego i znacznika końcowego, które nie są wymagane do skonstruowania opcji w menu. Gdyby zostały uwzględnione, tekst wewnętrzny zostałby zignorowany, ponieważ oba atrybuty są już określone, a tekst nie jest potrzebny. Jednak prawdopodobnie nie zobaczysz wielu ludzi piszących je w ten sposób. Najczęstszym sposobem, w jaki jest zapisywany, jest wartość, która zostanie wysłana na serwer wraz z tekstem wewnętrznym, który ostatecznie staje się atrybutem label, tak jak:

<option value="option1">Some Option</option>

Domyślne wybranie opcji

Możesz także określić domyślną opcję, która ma zostać wybrana w menu, dołączając do niej selected atrybut. Domyślnie, jeśli nie zostanie wybrana żadna opcja wybrana w menu, pierwsza opcja w menu zostanie wybrana podczas renderowania. Jeśli do selected atrybutu dołączono więcej niż jedną opcję, ostatnią opcją obecną w menu z tym atrybutem będzie ta wybrana domyślnie.

<option value="option1" selected>Some option</option>

Jeśli używasz atrybutu w menu wyboru z wieloma opcjami, wówczas wszystkie opcje z atrybutem zostaną wybrane domyślnie, a żadna z nich nie zostanie wybrana, jeśli żadna z opcji nie ma atrybutu.

<select multiple>
  <option value="option1" selected>Some option</option>
  <option value="option2" selected>Some option</option>   
</select>

Datalist

<datalist> określa listę wstępnie zdefiniowanych opcji dla elementu <input> . Zapewnia funkcję „autouzupełniania” elementów <input> . Użytkownicy zobaczą rozwijaną listę opcji podczas pisania.

<input list="Languages">

<datalist id="Languages">
  <option value="PHP">
  <option value="Perl">
  <option value="Python">
  <option value="Ruby">
  <option value="C+">
</datalist>

Obsługa przeglądarki