如何使用带有 AJAX nodejs 的另一个下拉列表更新下拉列表的值？

Question

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

到目前为止，我尝试过的是使用 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();
  }



});

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

Answer 1

我会在 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


                        }