Drop down list in TypeScript

By Feb 20, 2018

Description:

Here we explain how to create drop down lists in HTML and TypeScript. We use for this the HTML select tag.

Preferencesoft

In this article, we explore the possible uses of drop-down lists using a select field, corresponding to the HTML select tag, and explain how to exploit the user's selection.

Declaration of a drop-down list

In the HTML page, just place the following code:

<select>
    <option value="val1">Item 1</option>
        <option value="val2">Item 2</option>
    </select>
Output:


Strings assigned to value in each option are not visible on the screen. They can be read by a program.

When selecting an item, nothing happens. We need to handle events in JavaScript/Typescript to act according to the item selected by the user.

Navigation menu

A drop-down list can be used as a navigation menu. It is enough to propose to the user several items, for example Programming, Windows and Tips and as soon as the user clicks on one of them he is connected to the corresponding url.

But it is impossible to nest links in an option element of a drop-down list (for <select> elements).

We will only give absolute url addresses as values to the options, to simplify and not have to worry about browser security.

Here is the HTML code:

   <select id="Select1" class="aqua-select">
      <option selected="selected">Select a Page</option>
      <option class="yellow-option" value="https://www.kodfor.com/Programming.aspx">Programming</option>
      <option class="yellow-option" value="https://www.kodfor.com/Windows.aspx">Windows</option>
      <option class="yellow-option" value="https://www.kodfor.com/Tips.aspx">Tips</option>
   </select>

And the Typescript code:

class DropdownMenu {
    dropdownMenu: HTMLSelectElement;
    options: HTMLOptionsCollection;

    constructor(dropdown: HTMLSelectElement) {
        this.dropdownMenu = dropdown;
        this.options = dropdown.options;
        }

    OnChange() {
        alert(this.options[this.options.selectedIndex].value);
        document.location.href = this.options[this.options.selectedIndex].value;
    } 

}


window.onload = () => {
    let select1: HTMLSelectElement = <HTMLSelectElement>document.getElementById("Select1");
    let ddm1: DropdownMenu = new DropdownMenu(select1);
    select1.onchange = () => {
        ddm1.OnChange(); 
    }  
}

Output:

Note that this code does not work in recent browsers, because this type of event is considered blocking.

For information here is the error:

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

Menu with connection button

This time, we will use a drop-down list to just select an item and use a button to connect to the page corresponding to the selection.

The HTML code:

<div class="row">
        &nbsp;
        &nbsp;
        <select id="Select2" style="background-color: aqua;">
            <option selected="selected">Select a Page</option>
            <option style="background-color: yellow;" value="https://www.kodfor.com/Programming.aspx">Programming</option>
            <option style="background-color: yellow;" value="https://www.kodfor.com/Windows.aspx">Windows</option>
            <option style="background-color: yellow;" value="https://www.kodfor.com/Tips.aspx">Tips</option>
        </select>
        <input id="btnGo" type="button" value="Go Page" />
    </div>

And the TypeScript code:

class DropdownMenuButton {
    dropdownMenuButton: HTMLSelectElement;
    options2: HTMLOptionsCollection;

    constructor(dropdown: HTMLSelectElement) {
        this.dropdownMenuButton = dropdown;
        this.options2 = dropdown.options;
        }


    OnClick() {
        alert(this.options2[this.options2.selectedIndex].value);
        if (this.options2.selectedIndex >= 1)
            document.location.href = this.options2[this.options2.selectedIndex].value;
    } 

}


window.onload = () => {
    let select2: HTMLSelectElement = <HTMLSelectElement>document.getElementById("Select2");
    let btngo: HTMLButtonElement = <HTMLButtonElement>document.getElementById("btnGo");
    let ddm2: DropdownMenuButton = new DropdownMenuButton(select2);
    btngo.onclick = () => {
        ddm2.OnClick(); 
    }  

}

Output:

   

TypeScript

Categories

Share

Follow


KodFor Privacy Policy