JavaScript:按其他下拉列表的值过滤下拉列表

Question

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

我已经尝试了几个不同的选项，包括使用 onchange 事件监听器(它没有正常工作......很可能是 p.i.c.n.i.c.)以及尝试将元素值向后传递到 SQL 查询(也没有用)因为值(value)在旅行中丢失了)。有人可以建议正确执行此操作的正确方法是什么吗？非常感谢您的帮助!

数据.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();

模型.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:

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

Answer 1

你走对了。

1. 首先，您应该继续使用 onchange事件。当你改变一个国家时，它会听。当这种情况发生时，意味着是时候改变省份了select .另外，总是当你改变国家时，你应该重置省份select以避免以前使用时产生垃圾。

<select id="country-select" onchange="onCountryChanged()"></select>

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

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

1. 您必须更改您的 viewProvinces函数接受一个参数，国家代码，或 ccode .此外，您需要 .filter() results数组，仅获取属于该国家的省份 ( ccode )。

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

1. 您需要包括 ccode至 getProvinces()

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

1. 您没有提供调用主函数的位置。所以一般都是这样

viewCountries();

您可以选择预加载所有省份和国家。所以当你选择国家时，你不需要获取省份。这是一个特定的设计选择。你也可以制作Provinces或 getProvinces接收ccode , 从 View 中抽象出这一步。

希望对你有帮助。