How to update values of dropdown using another dropdown with AJAX nodejs?

Question

I have two dropdowns. One is for selecting the Main category, the second for selecting the sub category.
I want to be able to populate the sub category based on the Main category selected.

What I have tried so far is using JQUERY and AJAX to listen to change in the value of the dropdown using jquery and send an ajax request to the relevant route.

View

                     <div class="form-control">
                        <label for="category">Category</label>
                        <select name="category" id="category">
                            <option value='Men'>Men</option>
                            <option value='Women'>Women</option>
                            <option value='Sports'>Sports</option>
                           
                        </select>

                    </div>

                    <div class="form-control">
                        <label for="subcategory">Sub Category</label>
                        <select id="subcategory" name="subcategory">
                        </select>
                    </div>

AJAX and JQUERY

$("#category").on("change", function () {
    $("#subcategory").empty();
    showValue($(this).val());
});
var data = {};

function showValue(val) {
    console.log(val);
    data.category = val;
    $.ajax({
        url: "/admin/update-list",
        type: "POST",
        data: data,
        success: function(result) {

        updateDOM(result);
        },
        error: function (err) {
        console.log(err);
        }
    });
};

var updateDOM = function (result) {
    
    var data = result.data;
    
    for (var i = 0; i < data.length; i++) {
        console.log(data[i]);
        $("#subcategory").append("<option>"+ data[i] +"</option>");
    };
   
    };

/admin/update-list Route

router.post('/update-list', (req,res,next) => {
  let data = [];
  let category = req.body.category;
 

  console.log('From the ajax call, category is' + category);


  if(category = "Men") {
    data = [
      'Sneakers',
      'Boots',
      'High Heels',
      'Litas',
      'Timbs'
    ];
    res.status(200).json({data});
    res.end();
  }
  else if(category = "Women") {
    data = [ 
      'Timbs'
    ];
     res.status(200).json({data});
     res.end();
  }
   else if(category = "Sports") {
    data = [ 
      'Soccer Boots',
      'Rugby Boots'
    ];
     res.status(200).json({data});
     res.end();
  }



});

No matter what option I choose, the second dropdown returns the same data.

Answer 1

I would do this in PHP. Hopefully this conveys what you could adapt to your situation:

<select name="foo" >

</select> 

ajax call

        $.ajax({
            type:'POST',
            url:'your_code_page.php',
            data:'param1='+variable,
            success:function(html){
                $('[name="foo"]').html(html);
            }
        }); 

PHP post back

  echo "<option value=''>Please select a thing</option>"; <<outside loop
                        while ($row = sqlsrv_fetch_array($results)) {
                            $value   = $row['value'];
                            $display = $row['display'];
                            //-display the result of the array 
                            

       echo "<option value= " . $value . ">" . $display . "</option>"; << options returned in post


                        }