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

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

我尝试了一些不同的选择，包括使用一个无法正常工作的onchange事件侦听器…很可能是p.I.c.n.I.c。同时尝试将元素值向后传递到SQL查询中，由于值在传递过程中丢失，SQL查询也没有起作用。有人能提出正确的方法吗？我们非常感谢您的帮助

Data.js：

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();

Model.js：

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

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

View.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:

---

你走对了路

首先，您应该继续使用onchange事件。当你改变一个国家时，它会倾听。当这种情况发生时，这意味着是时候改变省选择。此外，当您更改国家/地区时，应始终重置省选择以避免以前使用的垃圾。 您必须更改ViewProvisions函数以接受一个参数，即国家/地区代码或ccode。此外，您还需要对结果数组进行筛选，仅获取属于该国家/地区的省份代码。 您需要将ccode包含到GetProvisions中 您尚未提供调用主函数的位置。因此，一般来说，它将是这样的 发展中国家

您可以选择预先加载所有省份以及国家/地区。因此，当您选择国家时，您将不需要获取省份。这是一个具体的设计选择。您还可以使省或GetProvisions接收ccode，从视图中抽象此步骤

---

我希望它能帮助您。

您是否已经尝试过在选择第一个下拉列表后只填充第二个下拉列表？是的。第一个下拉列表是在加载页面时运行，第二个下拉列表是在更改时运行。它似乎不起作用，但它也可能是如何实现的。不一定是这个想法不好。写你的答案…你可以用cname而不是ccode。但是当你观察演奏时，你会更喜欢用短弦而不是大弦。您还可以提供一个整数。它将提高代码的性能！谢谢你，理查德！这是完美的，甚至更好…工作！今天在你发帖之前，我更多地在玩它，我开始沿着你刚才介绍的路走，但这仍然不对，我也不认为我会走到那里。但是，谢谢你。非常感谢您的帮助！

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

function onCountryChanged() {
    resetProvincesSelect();
    viewProvinces($("#country-select").val());
}

function resetProvincesSelect() {
    var container = document.getElementById('province-select');
    $(container).empty();
}

function viewProvinces(ccode) {
    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.filter(function(el) {
            return el.ccode === ccode;
        }).forEach(function(loc, index) {
            var opt = document.createElement('option');
            opt.textContent = loc.pname;
            opt.value = loc.pcode;
            fragment.appendChild(opt);
        });
        container.appendChild(fragment);
    });
}

{
    ccode: row.CountryCode,
    cname: row.CountryName,
    pname: row.ProvinceName,
    pcode: row.ProvinceCode
}