1. Introduktion

HTML-dropdown-listor spelar en viktig roll i ett webbformulär när vi vill samla lite användarinformation. Listrutor tar mycket litet utrymme på en sida och gör det möjligt att ange stor volym information från vilken användare kan välja ett alternativ.

Så låt oss börja med vår uppgift. Innan vi börjar, kom bara ihåg en sak som jag använder Bootstrap-biblioteket i min kod för att utforma HTML-element. Om du inte vet hur du använder Bootstrap, följ länken nedan:

  • Bootstrap Kom igång

2. Skapa rullgardinslista

HTML tillhandahåller tagg för att skapa rullgardinslista. I själva verket med hjälp av tagg kan du skapa följande typer av HTML-listkontroller

  • Listrutan (som standard)
  • Lista ruta (genom att lägga till storlek attribut)

Följande kod skapar två listrutor med namnet 'firstList' och 'secondList'. För närvarande har jag inte angett något värde som ska visas i listor eftersom jag ska använda JavaScript för att fylla dem. Notera också attributet 'onClick' i 'firstList'. När användaren klickar på elementet i 'firstList' kommer funktionen att avbrytas. Förklaringen av vad funktion gör förklaras i nästa avsnitt.

Livsmedelstyp

Matvaror

När du kör kod efter att du har lagt till precis ovanför kodstycket ser utdata ut som följer

Output av HTML-kod med tomma listor

3. Befolkningslistor

Vårt nästa steg är att fylla i dessa listor med följande JavaScript-kod.

Om du inte vet hur du lägger till JavaScript på HTML-sidan följer du länken nedan

  • JavaScript Hur man gör?
 $ (document) .ready (function () {var list1 = document.getElementById ('firstList'); list1.options [0] = new Option ('- Select--', ''); list1.options [1] ] = nytt alternativ ('Snacks', 'Snacks'); list1.options [2] = new Option ('Drinks', 'Drinks');}); 

I koden har jag använt följande funktion

 $ (dokument). redan (funktion () {...}); 

Den här funktionen krävs eftersom den automatiskt avfyrar JavaScript-koden vid sidladdning. Vi behöver den här funktionen i vår kod eftersom vi vill fylla i rullgardinslistan "första listan" automatiskt när sidan visas för användaren.

I funktionen har jag skrivit koden för att lägga till värden till 'firstList'. För detta måste du först identifiera kontrollen som kan göras med hjälp av följande kod:

 var list1 = document.getElementById ('firstList'); 

och sedan använda alternativklassen för JavaScript lägg till värden till 'firstList'

 list1.options [0] = nytt alternativ ('- Välj--', ''); list1.options [1] = nytt alternativ ('Snacks', 'Snacks'); list1.options [2] = nytt alternativ ('Drycker', 'Drycker'); 

nästa del av JavaScript-koden är 'getFoodItem ()' -funktionen. Denna funktion är länkad till rullgardinslistan 'firstList' med attributet 'onClick'. Så när en användare utför en klickoperation på 'firstList', kommer den att påkalla funktionen 'getFoodItem ()'.

Funktionen 'getFoodItem ()' fyller i rullgardinslistan 'secondList' på de villkor som anges i koden.

Om användaren till exempel väljer "Snacks" -alternativ från firstList i den här självstudien, fylls den andra listan med alternativ för tillgängliga "Snacks" som "Burger", "Pizza", "Hotdog" etc.

Koden för funktionen nedan:

 funktion getFoodItem () {var list1 = document.getElementById ('firstList'); var list2 = document.getElementById ("secondList"); var list1SelectedValue = list1.options [list1.selectedIndex] .value; if (list1SelectedValue == 'Snacks') {list2.options.length = 0; list2.options [0] = nytt alternativ ('- Välj--', ''); list2.options [1] = nytt alternativ ('Burger', 'Burger'); list2.options [2] = nytt alternativ ('Pizza', 'Pizza'); list2.options [3] = nytt alternativ ('Hotdog', 'Hotdog'); list2.options [4] = nytt alternativ ('Potato Chips', 'Potato Chips'); list2.options [5] = nytt alternativ ('French Fries', 'French Fries'); } annat om (list1SelectedValue == 'Drycker') {list2.options.length = 0; list2.options [0] = nytt alternativ ('- Välj--', ''); list2.options [1] = nytt alternativ ('Coca Cola', 'Coca Cola'); list2.options [2] = nytt alternativ ('7up', '7up'); list2.options [3] = nytt alternativ ('Pepsi', 'Pepsi'); list2.options [4] = nytt alternativ ('Kaffe', 'Kaffe'); list2.options [5] = nytt alternativ ('Te', 'Te'); }} 

Peka på anmärkning

Observera att full kod för både funktionerna, dvs '$ (dokument). Redan (funktion () {...})' och funktionen 'getFoodItem () {...}' måste placeras i taggarna.

Följande kod identifierar kontroller på sidan, som vi också gjort tidigare

 var list1 = document.getElementById ('firstList'); var list2 = document.getElementById ("secondList"); 

nästa kodrad extraherar värdet från rullgardinslistan "första listan", dvs. Snacks, eller Drink baserat på val

 var list1SelectedValue = list1.options [list1.selectedIndex] .value; 

därefter kontrolleras villkoret. Baserat på villkor läggs värdet till 'secondList'.

Jag har också lagt till följande kodrad för att rensa 'secondList' innan jag lägger till värde varje gång.

Detta krävs eftersom om det inte görs kommer värdet att läggas till 'secondList' varje gång och dess data kommer helt enkelt att växa och som ett resultat kommer inkonsekvent information att visas

 list2.options.length = 0; 

Peka på anmärkning

I alternativklassen för att lägga till värden i båda listorna anges två strängar. Den första strängen specificeras för att visa värde för användaren och den andra specificeras för värde som ska användas med kod för att visa det i varningslåda eller för att lagra det i databasen.

den allmänna syntaxen följer

'nytt alternativ (String1, String2);'

När du kör den slutliga koden visas utgången enligt följande

Slutlig utgång efter att JavaScript har lagts till

Välj nu valfritt objekt från 'firstList'

Objekt 'Snacks' valt från firstList

'SecondList' kommer att visa värden för det objekt som valts i 'firstList'

Den andra listan fyllde med "Snacks" -alternativ

Hjälper den här artikeln dig?

  • Ja
  • Nej
Se resultat