How To Add Items In Dropdownlist Using Javascript

How to create dropdown list using JavaScript ?

The dropdown list carte du jour is very helpful for the users when they visit whatsoever website. Information technology makes a improve experience for the user to apply all kinds of services provided by the website without whatsoever hassle. In this article, we are going to create a dropdown list using HTML, CSS, and the well-nigh important JavaScript.

The dropdown list is basically a push button, when the user clicks on that, it expands downward and shows its sub-elements, from which users can select whatsoever one of them according to their preferences.

Approach: In this article, we will create two dropdown lists, the first one volition be a clickable dropdown list, which means that you have to click on that to see the rest of the sub-items, and the other one will be a hoverable dropdown list, you but take to hover your mouse over it and it will show the residual of the sub-element from which user can select i of them.

Example: In this dropdown list, the user will have to click on the button to open the dropdown list.

HTML

                <!DOCTYPE html>              
                <                html                lang                =                "en"                >              
                <                head                >              
                                <                championship                >Dropdown list using javascript</                title                >              
                                <                style                >              
                                body {              
                                margin: 0;              
                                padding: 0;              
                                background: #333333;              
                                display: flex;              
                                align-items: center;              
                                justify-content: centre;              
                                margin-acme: 30px;              
                                }              
                                .principal {              
                                height: 400px;              
                                padding: 10px;              
                                }              
                                .dropdown_button {              
                                background-colour: #0979ad;              
                                color: white;              
                                padding: 16px;              
                                font-size: 16px;              
                                border: none;              
                                cursor: arrow;              
                                width: 200px;              
                                font-family: montserrat;              
                                border: 1px solid #ffffff;              
                                }              
                                .courses {              
                                display: none;              
                                position: absolute;              
                                background-color: #f1f1f1;              
                                min-width: 200px;              
                                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);              
                                z-alphabetize: ane;              
                                }              
                                .courses li {              
                                color: black;              
                                padding: 12px 16px;              
                                text-decoration: none;              
                                display: cake;              
                                list-way: none;              
                                groundwork-colour: rgb(47, 47, 47);              
                                font-family unit: montserrat;              
                                border: 1px solid white;              
                                }              
                                .courses li a {              
                                text-ornamentation: none;              
                                color: white;              
                                display: block;              
                                padding: 10px;              
                                }              
                                .courses li:hover {              
                                groundwork-color: #0979ad;              
                                colour: white;              
                                }              
                                </                style                >              
                </                head                >              
                <                body                >              
                                <                div                class                =                "main"                >              
                                <                div                class                =                "dropdown_list"                >              
                                <                button                grade                =                "dropdown_button"              
                                onclick                =                "show_list()"                >              
                                Select course              
                                </                button                >              
                                <                div                id                =                "courses_id"                class                =                "courses"                >              
                                <                li                ><                a                href                =                ""                >Car learning</                a                ></                li                >              
                                <                li                ><                a                href                =                ""                >Data science</                a                ></                li                >              
                                <                li                ><                a                href                =                ""                >Data analysis</                a                ></                li                >              
                                <                li                ><                a                href                =                ""                >Data mining</                a                ></                li                >              
                                <                li                ><                a                href                =                ""                >Data warehousing</                a                ></                li                >              
                                </                div                >              
                                </                div                >              
                                </                div                >              
                                <                script                >              
                                function show_list() {              
                                var courses = document.getElementById("courses_id");              
                                if (courses.style.display == "cake") {              
                                courses.fashion.display = "none";              
                                } else {              
                                courses.style.brandish = "block";              
                                }              
                                }              
                                window.onclick = office (upshot) {              
                                if (!event.target.matches('.dropdown_button')) {              
                                certificate.getElementById('courses_id')              
                                .style.display = "none";              
                                }              
                                }              
                                </                script                >              
                </                body                >              
                </                html                >              