如何使用AJAX nodejs的另一个下拉菜单更新下拉菜单的值？

问题描述

我有两个下拉菜单。一种是选择主要类别，第二种是选择子类别。
我希望能够根据所选的主要类别填充子类别。

到目前为止，我一直在尝试使用JQUERY和AJAX使用jquery来监听下拉列表的值变化，并将ajax请求发送到相关路由。

查看

                     <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和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路由

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();
  }



});

无论我选择什么选项，第二个下拉列表都会返回相同的数据。

解决方法

我会用PHP做到这一点。希望这传达出您可以适应自己的情况的信息：

<select name="foo" >

</select> 

ajax通话

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

PHP回发

  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


                        }