我是节点 js 的新手，如何从数据库中获取相关的动态下拉列表

Question

我的节点代码：

app.get('/block_name', function (req,res){

var sql='SELECT  `block_name`,`block_id` FROM `tbl_block`  ';
connection.query(sql,function(err, result) {
    if (err) throw err;
    res.json(result);
});

});

app.get('/site_name', function (req,res){

var sql='SELECT  `site_name`,`site_id` FROM `tbl_site` ';
connection.query(sql,function(err, result) {
    if (err) throw err;
    res.json(result);
});

});

HTML

网站

      <select name="site" id="dropdown" >
        <option value="">- select -</option>
      </select>
     <label class="field" >Block</label>
      <select name="block" id="dropdown1" >
        <option value="">- select -</option>
      </select>

脚本

<script>

    $(document).ready(function(){
    $.ajax({
        url : "/site_name",
        type : "GET",
        success : function(data){

            var len = data.length;

            console.log(data);
            $("#dropdown").empty();
            for(var i =0; i<len;i++){
            var value1 = data[i]['site_name'];
            var value2 = data[i]['site_id'];
                $("#dropdown").append("<option value='"+value2+"' >"+value1+"</option>");

            }

        }
    });
}); 

    $(document).ready(function(){
    $.ajax({
        url : "/block_name",
        type : "GET",
        success : function(data){

            var len = data.length;

            console.log(data);
            $("#dropdown1").empty();
            for(var i =0; i<len;i++){
            var value1 = data[i]['block_name'];
            var value2 = data[i]['block_id'];
                $("#dropdown1").append("<option value='"+value2+"' >"+value1+"</option>");

            }

        }
    });
}); 


 </script>

我的第二个下拉列表列出了所有数据，但我需要根据第一个下拉列表列出特定的内容。 提前致谢.. 对不起我的英语不好

Answer 1

每当第一个下拉列表更改值时，您需要根据第一个下拉列表中的选择值重新填充第二个下拉列表 - 通常通过重新运行 ajax 调用来加载第二个下拉列表，但使用第一个下拉菜单的值来决定从服务器请求哪些数据。

您可以通过在第一个下拉列表中安装一个事件处理程序来做到这一点，这样您就可以随时检测到其值发生了变化，然后只要第一个下拉列表中的该事件发生，您就可以使用新的 ajax 调用重新填充第二个下拉列表发生。