HTML
Val av menykontroller

Syntax

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

Välj Meny

Elementet <select> genererar en rullgardinsmeny där användaren kan välja ett alternativ.

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

Ändra storlek

Du kan ändra storleken på markeringsmenyn med attributet size . En storlek på 0 eller 1 visar standardmenyn för rullgardinsmeny. En storlek större än 1 konverterar rullgardinsmenyn till en ruta som visar så många rader, med ett alternativ per rad och en rullningslista för att bläddra igenom tillgängliga alternativ.

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

Menyer med flera alternativ

Som standard kan användare bara välja ett enda alternativ. Genom att lägga till multiple attribut kan användare välja flera alternativ samtidigt och skicka in alla valda alternativ med formuläret. Användning av multiple attribut konverterar automatiskt rullgardinsmenyn till en ruta som om den hade en definierad storlek. Standardstorleken när detta inträffar bestäms av den specifika webbläsare du använder, och det är inte möjligt att ändra den tillbaka till en rullgardinsmeny medan du tillåter flera val.

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

När du använder multiple attribut finns det en skillnad mellan att använda 0 och 1 för storleken, medan det inte finns någon skillnad när attributet inte används. Användning av 0 kommer att göra att webbläsaren bete sig på vilket sätt det är programmerat att göra. Om du använder 1 sätter man uttryckligen storleken på den resulterande rutan till endast en rad hög.

Alternativgrupper

Du kan snyggt gruppera dina alternativ i en valmeny för att ge en mer strukturerad layout i en lång lista med alternativ med hjälp av <optgroup> -elementet.

Syntaxen är väldigt grundläggande genom att helt enkelt använda elementet med ett label att identifiera titeln för gruppen och innehålla noll eller fler alternativ som bör finnas inom den gruppen.

<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>

När du använder alternativgrupper behöver inte alla alternativ ingå i en grupp. Dessutom inaktiverar du en alternativgrupp alla alternativ inom gruppen och det är inte möjligt att manuellt aktivera ett enda alternativ inom en inaktiverad grupp.

alternativ

Alternativen i en urvalsmeny är vad användaren kommer att välja. Den normala syntaxen för ett alternativ är som följer:

<option>Some Option</option>

Det är dock viktigt att notera att texten i själva <option> -elementet inte alltid används, och i huvudsak blir standardvärdet för attribut som inte är angivna.

Attribut som styr alternativets faktiska utseende och funktion är value och label . Etiketten representerar texten som kommer att visas i rullgardinsmenyn (det du tittar på och klickar på för att välja den). Värdet representerar texten som kommer att skickas tillsammans med formulärinlämning. Om någon av dessa värden utelämnas använder den texten inuti elementet som värdet istället. Så exemplet vi gav ovan skulle kunna "utvidgas" till detta:

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

Observera bortfallet av den inre texten och slutetiketten, som inte krävs för att faktiskt konstruera ett alternativ i menyn. Om de inkluderades skulle den inre texten ignoreras eftersom båda attributen redan är specificerade och texten inte behövs. Men du kommer antagligen inte se många människor som skriver dem på detta sätt. Det vanligaste sättet det skrivs på är med ett värde som skickas till servern, tillsammans med den inre texten som så småningom blir etikettattributet, så:

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

Att välja ett alternativ som standard

Du kan också ange ett visst alternativ som ska väljas i menyn som standard genom att bifoga det selected attributet till det. Som standard, om inget alternativ anges som valt i menyn, kommer det första alternativet i menyn att väljas när det återges. Om mer än ett alternativ har det selected attributet bifogat, kommer det sista alternativet som finns i menyn med attributet att vara det som har valts som standard.

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

Om du använder attributet i en meny med flera alternativ, kommer alla alternativ med attributet att väljas som standard och inget kommer att väljas om inga alternativ har attributet.

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

Datalist

<datalist> anger en lista med fördefinierade alternativ för ett <input> -element. Det ger en "autocomplete" -funktion på <input> -element. Användare kommer att se en listruta med alternativ när de skriver.

<input list="Languages">

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

Webbläsarsupport