Aim : Write a program on concept of dynamically changing the menu options in JavaScript.

Requirements :

Working PC or Laptop ,
Installed any operating system
Any browser (Google Chrome)
Any code Editor(VS Code)

Theory:

The below example shows typical <select> usage. It is given an id attribute to enable it to be associated with a <label> for accessibility purposes, as well as a name attribute to represent the name of the associated data point submitted to the server. Each menu option is defined by an <option> element nested inside the <select>.

        <label for="menu">Select Option</label>
        <select name="menu" id="menu" onchange={handlClicked()}>
            <option value="" class="option">Select Option</option>
            <option value="male" class="option">Male</option>
            <option value="female" class="option">Female</option>
        </select>

Each <option> element should have a value attribute containing the data value to submit to the server when that option is selected. If no value attribute is included, the value defaults to the text contained inside the element. You can include a selected attribute on an <option> element to make it selected by default when the page first loads.

The <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once. It also accepts most of the general form input attributes such as required, disabled, autofocus, etc.

You can further nest <option> elements inside <optgroup> elements to create separate groups of options inside the dropdown.

HTMLSelectElement type

We use the HTMLSelectElement type for interacting with <select>option in JavaScript.

The HTMLSelectElement type contains the following helpful attributes:

selectedIndex- This attribute gives a zero-based selected options index. The selectedIndex will be -1 when no option is chosen. When the <select> option permits more than once selections, the selectedIndex gives the first option's value.
value- The value attribute gives the value attribute of the initially selected option component if there is a single, otherwise, it will return the empty strings.
multiple- The multiple attributes give true when the <select> component permits more than one selection. It is the same as the multiple attributes.

HTMLOptionElement type

The HTMLOptionElement type illustrates the <option> element in JavaScript.

This type contains the following properties:

Index- The option's index within the group of options.
Selected- It returns a true value if the option is chosen. We set the selected property true for selecting an option.
Text- It returns the text of the option.
Value- It returns the value attribute of HTML.

Code :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practical no 09</title>
</head>

<style>
</style>
<script>
    function handlClicked() {
        var e = document.getElementById("menu");
        var e1 = document.getElementById("menu1");
        var value = e.value; //value of the option
        var value1 = e1.value; //value of the option
        // var text = e.options[e.selectedIndex].text;//inner conte of the element
        console.log(value1);

        const male = ["Ranvir", "Ajay", "Salman"];
        const female = ["Aliya", "Kajal", "Aishwarya "];


        let txt = "";
        if (value == 'male') {
            male.forEach(myFunction);
        } else if (value == 'female') {
            female.forEach(myFunction);
        } else if (value1 == 0) {
            txt = "Select any option";
        }

        let innerOption = '';
        // document.getElementById("mainMenu").innerHTML = txt;
        let inner = '';
        e1.innerHTML = txt;

        function myFunction(v, index, array) {
            txt += `<option value=${index} name=${index}>` + v + "</option>";
        }
    }

    function handlClicked1() {
        var e1 = document.getElementById("menu1");
        var show = document.getElementById("show");
        var value1 = e1.value; //value of the option
        var text = e1.options[e1.selectedIndex].text; //inner conte of the element
        console.log(text);

        let txt = `Welcome ${text}`;
        show.innerHTML = txt;
    }
</script>

<body>
    <div>
        <h1>Dynamically changing the menu</h1>

        <label for="menu">Select Option</label>
        <select name="menu" id="menu" onchange={handlClicked()}>
            <option value="" class="option">Select Option</option>
            <option value="male" class="option">Male</option>
            <option value="female" class="option">Female</option>
        </select>
        <br>

        <label for="menu1"> select another</label>
        <select name="menu1" id="menu1" onchange={handlClicked1()}>
        </select>
        <h1 id="show"></h1>
    </div>
</body>
</html>

Output:

Conclusion :

Finally we can conclude that we have programmed on the concept of dynamically changing the menu options in JavaScript.

Notes