JavaScript:按其他下拉列表的值筛选下拉列表

我需要一些专家的帮助。我使用的是Electron,下面显示了三个文件,首先从SQLite数据库(data.js)中提取数据,然后将数据传递到一组数组中,并在下拉列表中访问数据(Model.js和View.js)。我的问题是,我需要根据第一个下拉列表中选择的国家筛选第二个下拉列表(显示省份名称)。按照目前的情况,无论选择哪个国家,您都可以获得完整的国家列表和省份列表。

我尝试了几个不同的选项,包括使用onchange事件侦听器(它不能正常工作……很可能是p.I.c.n.I.c.),以及尝试将元素值向后传递到SQL查询中(它也不能工作,因为值在移动过程中丢失了)。有人能建议一下正确执行此操作的正确方法吗?提前感谢您的帮助!

function getCountries(done) {
var sqlite3 = require('sqlite3').verbose();
var file = 'db/locations.sqlite3';
var db = new sqlite3.Database(file);
var larray = [];

db.all('SELECT * FROM Country', function(err, rows) {
    //  This code only gets called when the database returns with a response.
    rows.forEach(function(row) {
        larray.push({
            cname: row.CountryName,
            ccode: row.CountryCode
        });
    })
    return done(larray);
});
db.close();
}

function getProvinces(done) {
var sqlite3 = require('sqlite3').verbose();
var file = 'db/locations.sqlite3';
var db = new sqlite3.Database(file);
var stmt = 'SELECT Country.CountryId, Country.CountryName, Province.ProvinceName, Province.ProvinceCode FROM Province INNER JOIN Country ON Province.CountryId = Country.CountryId'
var larray = [];

db.all(stmt, function(err, rows) {
        //  This code only gets called when the database returns with a response.
        rows.forEach(function(row) {
        larray.push({
            cname: row.CountryName,
            pname: row.ProvinceName,
            pcode: row.ProvinceCode
        });
    })
    return done(larray);
});
db.close();

型号.js:

function Countries(done) {
  //Pull location values from data
return getCountries(done);
}

function Provinces(done) {
//Pull location values from data
return getProvinces(done);
}

视图.js:

function viewCountries() {

var viewCou =  Countries(function(results) {
    // Code only gets triggered when Countries() calls return done(...); 
    var container = document.getElementById('country-select');
    var fragment = document.createDocumentFragment();

    results.forEach(function(loc, index) { 
        var opt = document.createElement('option');
        opt.textContent = loc.cname;
        opt.value = loc.ccode;
        fragment.appendChild(opt);
    });
    container.appendChild(fragment);
})
}

function viewProvinces() {
var viewPro = Provinces(function(results) {
// Code only gets triggered when Provinces() calls return done(...); 
var container = document.getElementById('province-select');
var fragment = document.createDocumentFragment();

    results.forEach(function(loc, index) {
        var opt = document.createElement('option');
        opt.textContent = loc.pname;
        opt.value = loc.pcode;
        fragment.appendChild(opt);
        });
    container.appendChild(fragment);
});
}

HTML格式:

<p class="col-lg-2 col-md-4 col-sm-8 codes">COUNTRY</p>
<p id="country-value" class="col-lg-2 col-md-2 col-sm-4 fieldval">No value entered</p>
<select required id="country-select" class="col-lg-3 col-md-3 col-sm-8 formselect">
<option selected> ----Select---- </option>
</select>          
<label class="col-lg-4 col-md-3 col-sm-8 descr">Country code of sample</label>
<p class="col-lg-2 col-md-4 col-sm-8 codes">PROVINCE</p>
<p id="province-value" class="col-lg-2 col-md-2 col-sm-4 fieldval">No value entered</p>
<select required id="province-select" class="col-lg-3 col-md-3 col-sm-8 formselect">
<option selected> ----Select---- </option>                
</select>    
<label class="col-lg-4 col-md-3 col-sm-8 descr">Provence code of sample</label>