Generate different choices in a DropDownList depending on the selection made in another DropDownList using JavaScript

Question

Generate different choices in a DropDownList depending on the selection made in another DropDownList using JavaScript

I am currently working on implementing a search panel that will populate items based on the minimum and maximum price criteria. When looking at the front view of my page, it appears as follows:

For instance, if I select a minimum price value of 100,000, then the maximum price should display as >=150,000 (showing only 150,000 & 200,000).

Similarly, if the minimum price is set to 150,000, then the maximum price should be displayed as >=200,000 (displaying only 200,000) and so forth.

Can anyone provide guidance on how to achieve this functionality using JavaScript?

javascript .net

Answer 1

Answer №1

When you choose an item from one dropdown, it's important to identify items in the next dropdown that don't meet the corresponding condition. The structure of your dropdown menu may vary, but typically looks something like this:

Let minDD represent your Minimum Price dropdown and maxDD represent your Maximum Price dropdown.

// Adding event listeners
for(var i=0; i<minDD.children.length; i++){
    $(minDD.children[i]).click(function(){
        setBounds(maxDD, this.innerHTML, 'min');
    });
}
for(var i=0; i<maxDD.children.length; i++){
    $(maxDD.children[i]).click(function(){
        setBounds(minDD, this.innerHTML, 'max');
    });
}

// Function to filter out unwanted items

function setBounds(node, value, indicator) {
    if(indicator == 'min') {
        for(var i=0; i < node.children.length; i++) {
            if(node.children[i].innerHTML < value)
                node.removeChild(node.children[i]);
        }
    }
    if(indicator == 'max') {
        for(var i=0; i < node.children.length; i++) {
            if(node.children[i].innerHTML > value)
                node.removeChild(node.children[i]);
        }
    }
}

Answer 2

When you choose an item from one dropdown, it's important to identify items in the next dropdown that don't meet the corresponding condition. The structure of your dropdown menu may vary, but typically looks something like this:

Let minDD represent your Minimum Price dropdown and maxDD represent your Maximum Price dropdown.

// Adding event listeners
for(var i=0; i<minDD.children.length; i++){
    $(minDD.children[i]).click(function(){
        setBounds(maxDD, this.innerHTML, 'min');
    });
}
for(var i=0; i<maxDD.children.length; i++){
    $(maxDD.children[i]).click(function(){
        setBounds(minDD, this.innerHTML, 'max');
    });
}

// Function to filter out unwanted items

function setBounds(node, value, indicator) {
    if(indicator == 'min') {
        for(var i=0; i < node.children.length; i++) {
            if(node.children[i].innerHTML < value)
                node.removeChild(node.children[i]);
        }
    }
    if(indicator == 'max') {
        for(var i=0; i < node.children.length; i++) {
            if(node.children[i].innerHTML > value)
                node.removeChild(node.children[i]);
        }
    }
}

Generate different choices in a DropDownList depending on the selection made in another DropDownList using JavaScript

Answer №1

Similar questions

At what point should the term "function" be included in a ReactJS component?

angularjs issue with $setPrestine function not providing reliable results

Disabling a button after clicking using jQuery

Having trouble with Bootstrap 5 Carousel not sliding to the next image? Learn how to fix this issue by upgrading from Bootstrap 4 to Bootstrap 5

Choosing to maintain an open server connection instead of regularly requesting updates

Javascript does not have the capability to parse JSON

Unable to retrieve the saved user from the Express.js session

Unlock the powers of Openlayers 5: Altering interactions and accessing targeted vertices

Forwarding users to a new destination through a script embedded within a frame

Tips for sending a JavaScript variable value to jQuery validate() submitHandler while performing an AJAX request

Despite adding app.use(flash()) to resolve the issue, the error 'TypeError: req.flash is not a function' persists

Endless Loop Issue with Google Maps API Integration in NextJS-React

JavaScript does not allow executing methods on imported arrays and maps

In Javascript, the splice method removes all elements except the specified element

Error: The method 'getAjaxResponse' is not available for Object #<AbstractAjaxReq>

The JavaScript animations in AngularJS using ng-class are not being activated

What is the method for designating the specific pages on which the stripejs script should be loaded?

Exploring ways to leverage USB ports for data input and output within the .NET Core framework

Unraveling a JavaScript object derived from an unknown class: a comprehensive guide

Assorted presentation of list items in HTML tags