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

Question

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

我尝试了几个不同的选项，包括使用 onchange 事件侦听器（它没有正常工作......很可能 p.i.c.n.i.c。）以及尝试将元素值向后传递到 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:

<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

你走对了。

首先，您应该继续使用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();
}

您必须更改 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);
    });
}

您需要包括 ccode 到 getProvinces()

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

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

viewCountries();

您可以选择预加载所有省份和国家。所以当你 select 国家时，你不需要获取省份。这是一个特定的设计选择。您还可以使 Provinces 或 getProvinces 接收 ccode，从视图中抽象出此步骤。

希望对你有所帮助

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

JavaScript: Filtering dropdown list by value of other dropdown list

javascript

sql

variables

function

electron