Question

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

我尝试了一些不同的选项，包括使用onchange事件监听器（它没有正常工作......很可能是野餐）以及尝试将元素值向后传递到SQL查询（也没有＆＃ 39;因为旅行时价值丢失了。有人可以建议一个正确的方法可以正确地做到这一点吗？非常感谢您的帮助！

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
}

您没有提供调用main函数的位置。所以，一般来说就是这样

viewCountries();

您可以选择预加载所有国家/地区的省份。因此，当您选择国家/地区时，您无需获取省份。这是一个特定的设计选择。您还可以Provinces或getProvinces接收ccode，从视图中抽象此步骤。

我希望它可以帮到你。

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

1 个答案: