Filter Dropdown List Based on Another Dropdown List in JavaScript

Question

Filter Dropdown List Based on Another Dropdown List in JavaScript

Seeking expert guidance here! Currently working with Electron and have three key files that are involved in pulling data from a SQLite database (Data.js), organizing this data into arrays, and making it accessible through dropdown lists (Model.js and View.js). The challenge at hand is having the second dropdown list (for province names) filter according to the country selected in the first dropdown. Presently, both countries and provinces' full lists are displayed regardless of the initial selection.

Various attempts have been made, such as implementing an onchange event listener (yet unsuccessful due to certain complexities) or passing back the element value into the SQL query (but facing issues with value retention). Suggestions on the correct method to achieve this would be highly appreciated! Your insights are valuable!

Data.js:

function getCountries(done) {
// Function to pull country details from SQLite
}

function getProvinces(done) {
// Function to retrieve provinces along with their corresponding country details
}

Model.js:

function Countries(done) {
  // Access location values from data using specified function
}

function Provinces(done) {
// Retrieve all provinces available
}

View.js:

function viewCountries() {
// Display the list of countries on the page
}

function viewProvinces() {
// Show the provinces based on the selected country
}

HTML:

<p class="col-lg-2 col-md-4 col-sm-8 codes">COUNTRY</p>
// HTML code for displaying country information
<p class="col-lg-2 col-md-4 col-sm-8 codes">PROVINCE</p>
// HTML code for showing province details

javascript sql function variables electron

Answer 1

Answer №1

You're heading in the right direction.

To start, make sure to keep using the onchange event. It will detect when you change the country selection. When this occurs, it's time to update the province selection. Also, remember to reset the province selection whenever the country is changed to prevent any leftover data.

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

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

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

Revise your viewProvinces function to take a parameter, the country code, or ccode. Additionally, use the .filter() method to narrow down the provinces that belong to the selected country (ccode).

function viewProvinces(ccode) {
    var viewPro = Provinces(function(results) {
        // This code executes when Provinces() returns 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);
    });
}

Make sure to include the ccode in the getProvinces() function.

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

You haven't specified where the main function is being called. Generally, it should be like this:

viewCountries();

You can also preload all provinces along with countries for faster selection without fetching data each time. This is a design choice. Consider abstracting the step of passing ccode to Provinces or getProvinces for better structure.

I hope this guidance helps you moving forward.

Answer 2

You're heading in the right direction.

To start, make sure to keep using the onchange event. It will detect when you change the country selection. When this occurs, it's time to update the province selection. Also, remember to reset the province selection whenever the country is changed to prevent any leftover data.

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

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

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

Revise your viewProvinces function to take a parameter, the country code, or ccode. Additionally, use the .filter() method to narrow down the provinces that belong to the selected country (ccode).

function viewProvinces(ccode) {
    var viewPro = Provinces(function(results) {
        // This code executes when Provinces() returns 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);
    });
}

Make sure to include the ccode in the getProvinces() function.

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

You haven't specified where the main function is being called. Generally, it should be like this:

viewCountries();

You can also preload all provinces along with countries for faster selection without fetching data each time. This is a design choice. Consider abstracting the step of passing ccode to Provinces or getProvinces for better structure.

I hope this guidance helps you moving forward.

Filter Dropdown List Based on Another Dropdown List in JavaScript

Answer №1

Similar questions

AngularJS offers a variety of 'select all' checkboxes tailored for specific lists of checkboxes

Error: Unable to access 'map' property of an undefined variable in ReactJS

Implementing React Table selected rows from the parent component

jQuery Issue: Submission Count Doubling with Each POST Request

Position the spinner in the center of the user's screen

"Printed within the custom directive, the ng model value shows up as undefined

Angular 12 - Encountering an issue with undefined properties when trying to access 'values'

Struggling with sluggish performance during a loop while updating a MYSQL table

Unable to execute SQL query statement

Transferring data from one page to another using form variables

Express in Node.js throwing error: 'Cannot GET /'

Assigning a value to an input field using jQuery

The instance cannot be accessed by ES6 class methods

Create and adapt dynamic tiles to fit within the available width

Navigating with jQuery Scrollbars

JavaScript hovering drop-down feature

What could be causing the presence of additional characters in the responseText received from the Servlet to JavaScript via Ajax?

Using Angular promises and the $http service

Discovering the technique to dynamically load various content using jQuery in a div based on its

Is there a way to convert a vector of character strings (each representing commands) into a function in R?