Hoe maak je een vervolgkeuzelijst in HTML

De eenvoudigste vervolgkeuzelijst in HTML is eenvoudig te maken met de select-tag. Dit is een containertag, de optietags zijn erin ingesloten; ze specificeren de lijstitems.

Er zijn verschillende opties voor lijsten die u kuntmaak gebruik van de select tag: een drop-down lijst (de opties vallen weg na het klikken op het hoofdveld of de cursor erop) en een meerkeuze lijst - daarin kan de gebruiker verschillende items selecteren. De eerste komen vaker voor, ze vormen een belangrijk element in de navigatie van moderne sites. Er kan een vervolgkeuzelijst met meerdere selecties worden toegepast, bijvoorbeeld in mappen waarin verschillende productkenmerken moeten worden geselecteerd.

vervolgkeuzelijst

U kunt het uiterlijk en de eigenschappen van lijsten wijzigen met behulp van universele en speciale kenmerken.

De kenmerken van de select-tag

1. Meervoudig - stelt de meerkeuze in.

2. Grootte - geeft het aantal zichtbare lijnen in de lijst aan, dat wil zeggen de hoogte. En dan hangt alles af van of het attribuut meerdere is of niet. Zo ja, en u geeft geen maat op, dan zal de gebruiker, als er meerdere zijn, alle mogelijke keuzes zien, maar als er meerdere ontbreken, wordt slechts één regel weergegeven en kan de rest van de bezoeker lezen wanneer hij op het pictogram van de lift aan de rechterkant drukt. Als de hoogte van de grootte is opgegeven en deze kleiner is dan het aantal opties, verschijnt rechts een schuifbalk.

3. Naam is de naam. Een vervolgkeuzelijst kan het zonder doen, maar het kan nodig zijn om te communiceren met een handler op de server. In de regel geeft de naam nog steeds aan.

De select-tag heeft geen verplichte kenmerken, in tegenstelling tot de optielabel.

html drop-down lijst

Attributen van de geneste optielabel

  1. Geselecteerd - is voor het markeren van een lijstitem. De gebruiker kan meer dan één item selecteren als het kenmerk Meervoud is opgegeven (zie hierboven).
  2. Waarde is de waarde. Dit kenmerk is vereist. De webserver moet begrijpen welke items de gebruiker heeft geselecteerd.
  3. Label. Met dit kenmerk kunt u de lijstitems inkorten die te lang zijn. Op het scherm wordt bijvoorbeeld "Milaan" weergegeven in plaats van de optie "Milaan - het administratieve centrum van Lombardije" die is opgegeven in de tag. Noord-Italië ". Dit kenmerk wordt ook gebruikt om items in de lijst te groeperen.

Wat de breedte van de lijst betreft, deze wordt standaard ingesteld op basis van de lengte van de breedste tekst in de lijst. Natuurlijk kan de breedte worden gewijzigd met behulp van HTML-stijlen.

Vervolgkeuzelijst op andere manieren

Het kan bijvoorbeeld worden gedaan met behulp van CSSlijst wordt weergegeven wanneer u de muisaanwijzer over een pagina-item. Uitstekende mogelijkheden voor het maken van lijsten geeft JavaScript, die het werk jQuery bibliotheek vereenvoudigt. De keuzelijst die is verbonden met deze bibliotheek kan zeer complex, zoals een cascade zijn. Dat wil zeggen, wanneer u een item selecteert in een lijst zal de volgende lijst vermeld staan, bijvoorbeeld, is er menu "Women's clothing" (wanneer u de muisaanwijzer daling soorten kleding), dan wanneer een van de soorten, bijvoorbeeld, "Tops" drop-down lijst met de elementen: jassen, parken, jassen, jassen en ga zo maar door. n.

jQuery drop-down lijst

We hebben oppervlakkig de belangrijkste manieren opgesomd, wanneerwiens hulp je kunt gebruiken om een ​​vervolgkeuzelijst te maken. Natuurlijk zijn er veel nuances in HTML, in CSS en JavaScript, waarmee je de functionaliteit en het uiterlijk van lijsten kunt wijzigen.