javascript - I am new to node js how to get dependent dynamic dropdown from database

Question

my node code:

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

Site

      <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

<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>

my second dropdown lists all the data but i need particular thing to be listed according to the first dropdown. Thanks in advance.. Sorry for my bad English

Answer 1

Anytime the first drop-down changes value, you need to repopulate the second drop-down based on the select value in the first drop-down - usually by rerunning your ajax call to load the second drop-down, but using the value of the first drop-down to decide which data to request from the server.

You would do this by installing an event handler on the first drop-down so you can detect any time its value is changed and then you would repopulate the second dropdown with a fresh ajax call whenever that event on the first drop-down occurs.