在表单之间传递JavaScript选择值

I'm in need of some expert JavaScript advice. I'm coding using Electron.

我需要一些专家的JavaScript建议。我正在使用Electron进行编码。

The issue: I'm trying to capture the value selected from the second of two dropdown lists and pass it back into a JavaScript file. The code below is ordered as it would run. The dropdown code is not shown as it is simply populated by the viewProvinces function below. The first dropdown's id is "country-select" while the second is "province-select".

问题:我正在尝试捕获从两个下拉列表中的第二个中选择的值,并将其传递回JavaScript文件。下面的代码按其运行顺序排序。下拉代码未显示,因为它只是由下面的viewProvinces函数填充。第一个下拉列表的ID是“country-select”,而第二个是“省选择”。

In this case, a link is clicked in Index.html which calls the anonymous function in Data.js. The anonymous function calls viewProvinces that populates the parray/data variables from the anonymous function which produces the alert showing the value returned.

在这种情况下,在Index.html中单击一个链接,该链接调用Data.js中的匿名函数。匿名函数调用viewProvinces,它填充匿名函数的parray / data变量,该函数生成显示返回值的警报。

(FYI) viewProvinces also populates the second dropdown (id province-select) by filtering based on the values produced in the first dropdown (id country-select). For example, if Afghanistan is selected as a country in the first, then only provinces from Afghanistan are shown in the second.

(仅供参考)viewProvinces还通过基于第一个下拉列表中生成的值(id country-select)进行过滤来填充第二个下拉列表(id省选择)。例如,如果首先选择阿富汗作为国家,那么第二个国家只会显示阿富汗的省份。

Moving on, viewProvinces calls Provinces which is an array populated when it calls getProvinces after querying a SQLite database for the source data.

继续前进,viewProvinces调用省份,这是在查询SQLite数据库中的源数据后调用getProvinces时填充的数组。

ViewProvinces, Provinces, and getProvinces all work correctly. The link and the anonymous function are the issue and technically work in that they produce a result, but not the correct result. When the link is clicked it produces "object Object". I believe I understand why it is doing this, though I am not skilled enough (yet) to know how to fix it. I do not know how to adjust the code so that it returns the actual value(s) selected from the second (provinces) dropdown.

ViewProvinces,Provinces和getProvinces都能正常工作。链接和匿名函数是问题,在技术上工作,因为它们产生结果,但不是正确的结果。单击链接时,它会生成“对象对象”。我相信我理解为什么会这样做,尽管我还不够熟练(还)知道如何修复它。我不知道如何调整代码,以便它返回从第二个(省)下拉列表中选择的实际值。

Put simply, the data is gathered from a SQL query that populates a series of arrays that further populates the dropdown list. The value of this list, once selected, should be returned back to the source JavaScript file into a variable (it fails here).

简而言之,数据是从SQL查询中收集的,该查询填充了一系列进一步填充下拉列表的数组。选择后,此列表的值应返回到源JavaScript文件中的变量(此处失败)。

Apologies if this sounds convoluted, but I'm trying to be thorough. Any help in this matter would be greatly appreciated! Thank you!!

抱歉,如果这听起来很复杂,但我正在努力做到彻底。任何有关此事的帮助将不胜感激!谢谢!!

Index.html:

<a id="test-select" href="#">test</a>

Data.js:

$( "#test-select" ).click(function(e) {
e.preventDefault();
var parray = viewProvinces($("#country-select").val());
var data = $('#test-select').data(parray);
alert(data);
});

View.js:

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

Model.js:

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

Data.js:

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.CountryCode, 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({
            ccode: row.CountryCode,
            cname: row.CountryName,
            pname: row.ProvinceName,
            pcode: row.ProvinceCode
        });
    })
return done(larray);
});
db.close();
}

1 个解决方案

#1

I have tried to answer your question via a fiddle based on your code created here but I had some trouble understanding a couple of things in your code, so I might have missed something. The main change I made was to make the Provinces(function(results) {.. function return the array of filtered provinces:

我试图通过基于你在这里创建的代码的小提示来回答你的问题但我在你的代码中理解了一些东西时遇到了一些麻烦,所以我可能错过了一些东西。我做的主要改变是使省(函数(结果){..函数返回过滤省的数组:

function viewProvinces(ccode) {

    return Provinces(function(results) {
        var provinces = [];
        // 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);
            provinces.push(loc);
        });
        container.appendChild(fragment);
        return provinces;
    });

Once this is done, the parray is correctly setup:

完成后,正确设置parray:

var parray = viewProvinces($("#country-select").val());

var parray = viewProvinces($(“#country-select”)。val());

However, I was confused when I read this code:

但是,当我读到这段代码时,我很困惑:

var data = $('#test-select').data(parray); alert(data);

var data = $('#test-select')。data(parray);警报(数据);

I assumed you were trying to save the provinces data in the link's store, so modified the code as follows to demo that it works:

我假设你试图在链接的商店中保存各省的数据,所以修改了如下代码来演示它的工作原理:

    $('#test-select').data({
        provinces: parray
    }); // Save the provinces array

    var data = $('#test-select').data(); // Retrieve the provinces array

    //Dump it on the console
    $.each(data.provinces, function(index, province) {
        console.log("Province[" + index + "].name: " + province.cname);
    });