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


<!DOCTYPE html>
        <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;
    <body onload="resetSelection()">
        <select id="category" size="1" onchange="makeSubmenu(this.value)">
            <option value="" disabled selected>Choose Category</option>
        <select id="categorySelect" size="1">
            <option value="" disabled selected>Choose Subcategory</option>
        <button onclick="displaySelected()">show selected</button>

Run the following code and see the results