Lesson 21: Selection Lists

Learn how to create and work with selection lists in JavaScript to build interactive dropdown interfaces.

❮ Previous Lesson Next Lesson: Arrays Part 1 ❯

21.1 Understanding Selection Lists

Selection lists (dropdowns) allow users to choose an item from a list of options. They are essential for forms where space is limited or when presenting multiple choices in an organized way.

Key points: Selection lists can be displayed as dropdowns (default) or as listboxes with multiple visible items. They are ideal for forms where you need to conserve space while offering multiple choices.

21.1.1 Creating Selection Lists

Example 21.1: Listbox with Multiple Visible Items

This example shows how to create a listbox that displays multiple items at once.

// HTML
<select name="Computers" size="4">
  <option>PCs</option>
  <option>Laptops</option>
  <option>Tablet Computers</option>
  <option>Mobile Phones</option>
</select>

The Output

Example 21.2: Dropdown Selection List

This example creates a dropdown list where only one item is visible until the user clicks to expand.

// HTML
<select name="Computers">
  <option>PCs</option>
  <option>Laptops</option>
  <option>Tablet Computers</option>
  
</select>

The Output

21.1.2 Retrieving Selected Values

Example 21.3: Checking the Selected Item

This example demonstrates how to get the selected value from a listbox using JavaScript.

// JavaScript
function testItem() {
  const myselect = document.getElementById("list1");
  const myitem = myselect.options[myselect.selectedIndex].text;
  alert(myitem + " is selected");
}

// HTML
<select id="list1" size="4">
  <option>PC</option>
  <option>Laptop</option>
  <option>Tablet Computer</option>
  <option>Mobile Phone</option>
</select>
<br>
<input type="button" Value="Check Item" onClick="testItem()">

21.2 Practical Applications

Selection lists are widely used in web applications. Here are practical examples of how to implement them effectively.

21.2.1 Navigation with Selection Lists

Example 21.4: Books Category Selection

This example shows how to use a selection list for navigation between different categories.

// JavaScript
function loadHtml(form) {
  const index = form.list.selectedIndex;
  const pages = [
    "art.html", "astro.html", "bestsell.html", "business.html", 
    "children.html", "computer.html", "health.html", "mystery.html", 
    "horror.html", "nonfic.html", "romance.html", "science.html", 
    "scific.html", "self.html", "sports.html", "travel.html", 
    "young.html", "music.html"
  ];
  
  if (index >= 0 && index < pages.length) {
    alert("Redirecting to: " + pages[index]);
    // In a real application: location = pages[index];
  }
}

// HTML
<form name="book">
  <select name="list" size="4">
    <option>Art and Drawing</option>
    <option>Astronomy</option>
    <option>Best Sellers</option>
    <option>Business & Investment</option>
    <option>Children Books</option>
    <option selected>Computer & Internet</option>
    <option>Health & Fitness</option>
    <option>Mystery</option>
    <option>Horror & Thriller</option>
    <option>Non Fiction</option>
    <option>Romance</option>
    <option>Science & Nature</option>
    <option>Science Fiction</option>
    <option>Self Improvement</option>
    <option>Sports & Games</option>
    <option>Travel</option>
    <option>Young Readers' Corner</option>
    <option>Music</option>
  </select>
  <input type="button" name="button" Value="OK" onClick="loadHtml(this.form)">
</form>
Search for your books by selecting a category, then click OK

❮ Previous Lesson Next Lesson: Arrays Part 1 ❯