HTML CSS Javascript jQuery AJAX PHP Java MORE

Show subcategory list as per category select in dropdown select box Javascript

❮ Previous Next ❯ 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        var subcategory = {
            Mobile: ["Nokia", "Redmi", "Samsung"],
            Clothes: ["Shirt", "Pant", "T-shirt"]
        }

        function makeSubmenu(value) {
            if (value.length == 0) document.getElementById("categorySelect").innerHTML = "<option></option>";
            else {
                var citiesOptions = "";
                for (categoryId in subcategory[value]) {
                    citiesOptions += "<option>" + subcategory[value][categoryId] + "</option>";
                }
                document.getElementById("categorySelect").innerHTML = citiesOptions;
            }
        }

        function displaySelected() {
            var country = document.getElementById("category").value;
            var city = document.getElementById("categorySelect").value;
            alert(country + "\n" + city);
        }

        function resetSelection() {
            document.getElementById("category").selectedIndex = 0;
            document.getElementById("categorySelect").selectedIndex = 0;
        }
    </script>
</head>
<body onload="resetSelection()">
    <select id="category" size="1" onchange="makeSubmenu(this.value)">
<option value="" disabled selected>Choose Category</option>
<option>Mobile</option>
<option>Clothes</option>
</select>
    <select id="categorySelect" size="1">
<option value="" disabled selected>Choose Subcategory</option>
<option></option>
</select>
    <button onclick="displaySelected()">show selected</button>
</body>
</html>

Run it yourself

Demo






❮ Previous Next ❯