根据其他下拉列表中选择的值动态填充下拉列表

Question

我是Nodejs菜鸟。我真的没有从任何其他来源得到任何想法。

我目前有两个下拉菜单。假设State和City。

States和Cities的值在MySQL表中。

当我打开index页面时

我首先检索States

router.get('/', function(req, res, next) {
    dbConn.query('SELECT * FROM STATES',function(err,rows)     {
        console.log(rows)
            res.render('home/index',{data:rows});
    });
})

根据我选择的州，我需要填充相应的城市吗？

选择router.get后如何在State下称呼它

router.get('/(:id)', function(req, res, next) {

    let id = req.params.id;

    dbConn.query('SELECT * FROM STATES WHERE stated = ' + id, function(err, rows, fields) {
            console.log(rows)
            // render to user.ejs
            res.render('home/index', {
                city: rows[0].City,
            })
    })
})

当前，这是我的State下拉列表

<select name="state">
    <% for(let i = 0; i< data.length; i++) { %>
    <option value="<%= [data[i].stateid, data[i].State] %>"><%= data[i].State%></option>
    <% } %>
</select>

现在如何动态地在City下拉列表中填充此内容？怎么称呼它？我不想刷新页面。

<select name="city">
    <% for(let i = 0; i< city.length; i++) { %>
    <option><%= city[i].City%></option>
    <% } %>
</select>

请帮助！谢谢！