0Pricing
HTML Academy · Lekcja

Menu rozwijane Select i option

Tworzenie rozwijanych menu wyboru za pomocą select i option

Menu rozwijane Select i option to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Element select

Element <select> tworzy rozwijane menu:

<label for="country">Country</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="de">Germany</option>
</select>

value a tekst elementu option

Każdy element <option> ma wartość value (wysyłaną do serwera) oraz tekst wyświetlany:

<select name="color">
  <option value="">-- Select a color --</option>  <!-- placeholder -->
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</select>
<!-- value="#ff0000" is submitted; "Red" is displayed -->

Atrybut selected

Wstępnie wybierz opcję za pomocą atrybutu selected:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro" selected>Pro (Recommended)</option>
  <option value="enterprise">Enterprise</option>
</select>

optgroup dla pogrupowanych opcji

Grupuj powiązane opcje za pomocą <optgroup>:

<select name="language">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

Atrybut multiple

Umożliwiaj wybór wielu opcji za pomocą atrybutu multiple:

<label for="skills">Select your skills (Ctrl+Click for multiple)</label>
<select id="skills" name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>
<!-- size controls how many options are visible -->
<!-- Submitted as multiple values: skills=html&skills=css -->

Atrybut size

Atrybut size określa, ile opcji jest widocznych:

<!-- size=1 (default): dropdown -->
<select size="1">...</select>

<!-- size>1: list box -->
<select size="4">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>Python</option>
</select>

Wyłączone opcje i grupy

Wyłączaj pojedyncze opcje lub całe grupy:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (Contact Sales)</option>
</select>

<select>
  <optgroup label="Legacy (deprecated)" disabled>
    <option value="v1">Version 1</option>
  </optgroup>
</select>

Stylowanie select

Możliwości stylowania natywnego elementu <select> są ograniczone — oto, co działa:

select {
  appearance: none;   /* remove native dropdown arrow */
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

Niestandardowe listy rozwijane a natywny select

Kompromisy, które należy rozważyć przy wyborze niestandardowego komponentu listy rozwijanej:

  • Natywny select — domyślnie dostępny, przyjazny urządzeniom mobilnym, działa bez JavaScript
  • Niestandardowa lista rozwijana — pełna kontrola nad stylowaniem, ale wymaga pełnej implementacji ARIA i obsługi klawiatury

W większości przypadków preferuj natywny element <select>.

Odczytywanie wybranej wartości w JavaScript

Pobieraj lub ustawiaj wybraną wartość za pomocą JavaScript:

const select = document.getElementById('country');

// Get selected value:
console.log(select.value);  // e.g. 'us'

// Get selected option text:
console.log(select.options[select.selectedIndex].text);

// Set selected value:
select.value = 'de';

// Listen for changes:
select.addEventListener('change', () => {
  console.log('Selected:', select.value);
});

Wzorzec opcji zastępczej

Utwórz opcję zastępczą, której nie można wybrać:

<select name="role" required>
  <option value="" disabled selected>-- Select your role --</option>
  <option value="dev">Developer</option>
  <option value="designer">Designer</option>
  <option value="pm">Product Manager</option>
</select>
<!-- disabled + selected: shows as placeholder
     value="" + required: fails validation if not changed -->

Szybkie sprawdzenie

Jaki element grupuje powiązane opcje wewnątrz rozwijanego menu select?

Podsumowanie: select i option

Najważniejsze informacje o rozwijanych menu:

  • <select> + <option> — rozwijane menu
  • value elementu option — wartość wysyłana do serwera
  • selected — wstępnie wybiera opcję
  • <optgroup label> — grupuje powiązane opcje
  • multiple — umożliwia wybór wielu opcji
  • size — wyświetla N opcji bez rozwijania menu

Często zadawane pytania

Czy lekcja „Menu rozwijane Select i option” jest bezpłatna?

Tak — pełny tekst „Menu rozwijane Select i option” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Menu rozwijane Select i option”?

Tworzenie rozwijanych menu wyboru za pomocą select i option Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Menu rozwijane Select i option”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Menu rozwijane Select i option
  2. Textarea do wprowadzania tekstu w wielu wierszach
  3. Grupy pól wyboru i przycisków radiowych
  4. Datalist do autouzupełniania
← Powrót do HTML Academy