To select a sub-category after selecting a category using jquery, Load a sub-category by category by calling the jquery function, Return you get the sub-category value related to the JavaScript and jquery category


#index.php

<!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 the following code and see the results