Javascript nodejsmysql中的动态下拉

Javascript nodejsmysql中的动态下拉,javascript,mysql,node.js,ajax,html,Javascript,Mysql,Node.js,Ajax,Html,当用户单击并选择一个客户机时,我想根据客户机更改区域,然后区域下拉列表根据数据库中与该客户机相关的区域更改在此处输入代码 这是我的客户表: 以下是我的Region表,其中client_id是外键: 这是我的密码 添加区域 -> 客户端ID-> -选择一个客户端- -选择一个区域- 提交 0 { %> 所有现有地区 区域名称 客户 区域 行动 返回仪表板 您需要在onChange事件上为field_id=client_id添加一个ajax请求,以根据所选client_id获取区域。对于响应,

当用户单击并选择一个客户机时,我想根据客户机更改区域,然后区域下拉列表根据数据库中与该客户机相关的区域更改在此处输入代码

这是我的客户表:

以下是我的Region表,其中client_id是外键:

这是我的密码

添加区域 -> 客户端ID-> -选择一个客户端- -选择一个区域- 提交 0 { %> 所有现有地区 区域名称 客户 区域 行动 返回仪表板
您需要在onChange事件上为field_id=client_id添加一个ajax请求,以根据所选client_id获取区域。对于响应,您可以根据需要设计服务器,您可以在服务器端生成HTML,也可以在响应中从数据库获取原始结果,然后在客户端从中生成HTML。当您获得合适的选择选项的TML格式,然后将该html附加到区域id select。

基本上,解决方案归结为以下几点:

//These are your target elements
const client = document.querySelector('#client');
const region = document.querySelector('#region');
const table = document.querySelector('#table');
//POST username upon change event and modify table 'div' and region'select' innerHTML's accordingly
client.addEventListener('change', function () {
    let xhr = new XMLHttpRequest();
    let user = this.value;
    xhr.open('POST', '/getRegionsByUser', true);
    xhr.send(user);
    xhr.onload = function(){
        if (xhr.readyState == 4 && xhr.status == 200) {
            let regions = JSON.parse(this.responseText);
            /* expected JSON-formatted string {list:[region1, region2, ...] */
            regions.list.forEach(region => {
                region.innerHTML += '<option value="'+region+'">'+region+'</option>';
                table.innerHTML += '...';
            });
        }
    };
});

服务器端脚本很大程度上取决于您的环境,从概念上讲,它应该按照用户名执行SQL选择区域,并使用JSON格式的列表进行响应

如何显示来自mysql的结果。当我在第一个下拉菜单中选择了客户机,然后在第二个下拉菜单中根据数据库中的客户机显示区域时ase??客户机不是硬编码的,它可以更改,一个客户机可能有多个区域,我需要一个可以相应更改的解决方案。当我们选择一个客户机时,只有属于该客户机的区域出现在“区域”下拉列表中。我想这样做,通过使用数据库中的值,您可以将您的客户机id发布到服务器,请从客户机\u id={received\u value}所在的区域中选择区域\u name服务器端,使用查询结果进行响应,并更改您的div和下拉列表内容。这大致就是逻辑。我希望使用数据库中的值来实现这一点。我希望输出与该链接中的输出类似,但在该链接中,输入是硬编码的。我希望根据数据库添加ajax。您能帮助我吗