Changing the selected value in a dropdown menu when the first dropdown is selected

Question

Changing the selected value in a dropdown menu when the first dropdown is selected

Currently, I am facing an issue where changing the value of the first dropdown also changes the value of the second dropdown. How can I resolve this issue?

I want to ensure that when I change the value of the first dropdown, the second dropdown does not inherit the same value.

The code snippet is provided below:

$(".nf-default-opt").click(function() {
  $(this).parent().toggleClass("nf-active");
})

$(".nf-opt-ul .nf-li").click(function() {
  var currentSelected = $(this).html();
  $(".nf-default-opt .nf-li").html(currentSelected);
  $(this).parents(".nf-select-c").removeClass("nf-active");
})

Any assistance on fixing this would be greatly appreciated!

javascript html jquery css

Answer 1

Answer №1

The main issue here is that when using

$("".nf-default-opt .nf-li")

, it will target all default options. To fix this, you should use this to specify the current .nf-li and then locate the closest parent .nf-select-c before finding the specific .nf-default-opt within that dropdown:

$(this).closest(".nf-select-c").find(".nf-default-opt .nf-li").html(currentSelected);

Additionally, since you are also removing a class, you can combine these actions as follows:

var currentSelected = $(this).html();
var wrapper = $(this).closest(".nf-select-c");
wrapper.find(".nf-default-opt .nf-li").html(currentSelected);
wrapper.removeClass("nf-active");

Incorporating the above changes into your script snippet would result in:

$(".nf-default-opt").click(function() {
  $(this).parent().toggleClass("nf-active");
})

$(".nf-opt-ul .nf-li").click(function() {
  var currentSelected = $(this).html();
  var wrapper = $(this).closest(".nf-select-c");
  wrapper.find(".nf-default-opt .nf-li").html(currentSelected);
  wrapper.removeClass("nf-active");
})

.nf-dropdown {
  position: relative;
  width: 100%;
}

/* Additional CSS styles go here */

Answer 2

The main issue here is that when using

$("".nf-default-opt .nf-li")

, it will target all default options. To fix this, you should use this to specify the current .nf-li and then locate the closest parent .nf-select-c before finding the specific .nf-default-opt within that dropdown:

$(this).closest(".nf-select-c").find(".nf-default-opt .nf-li").html(currentSelected);

Additionally, since you are also removing a class, you can combine these actions as follows:

var currentSelected = $(this).html();
var wrapper = $(this).closest(".nf-select-c");
wrapper.find(".nf-default-opt .nf-li").html(currentSelected);
wrapper.removeClass("nf-active");

Incorporating the above changes into your script snippet would result in:

$(".nf-default-opt").click(function() {
  $(this).parent().toggleClass("nf-active");
})

$(".nf-opt-ul .nf-li").click(function() {
  var currentSelected = $(this).html();
  var wrapper = $(this).closest(".nf-select-c");
  wrapper.find(".nf-default-opt .nf-li").html(currentSelected);
  wrapper.removeClass("nf-active");
})

.nf-dropdown {
  position: relative;
  width: 100%;
}

/* Additional CSS styles go here */

Answer 3

Answer №2

The issue lies within the second line of your callback function for the second click event.

$(".nf-default-opt .nf-li").html(currentSelected);

Instead of updating all instances of .nf-default-opt .nf-li (which there are two), you should target and update only the specific element you intend to change with the .html method.

Answer 4

The issue lies within the second line of your callback function for the second click event.

$(".nf-default-opt .nf-li").html(currentSelected);

Instead of updating all instances of .nf-default-opt .nf-li (which there are two), you should target and update only the specific element you intend to change with the .html method.

Changing the selected value in a dropdown menu when the first dropdown is selected

Answer №1

Answer №2

Similar questions

"Implementing a Redux structure to enhance audio player functionality and effectively manage error

Dividing the content: A two-column CSS layout

Is there a way to configure this code to automatically start upon page refresh?

Inject a fresh input into a TextInput component in React Native

What is the best way to execute a delete operation using jQuery AJAX to remove a document in MongoDB?

Show XML content in HTML text box

The specified component does not contain a property named n according to the modal error

Unable to view the image in browsers other than Internet Explorer

Efficient approach for combining list elements

How can you selectively export a single function from a JavaScript file?

Exploring the globe with 3D raycasting, orbit controls, and dynamic camera rotation

variable identifier looping through elements

The functioning of JavaScript's ajax capabilities

Determine whether an image is retina or non-retina using just one picture

Obtaining Data from PHP using jQuery AJAX

Generate a JSON document to download and be stored in browser's memory as a JSON file

Ways to retrieve a specific attribute within a detailed JSON reply

Exploring Discord.js: Sorting a Collection of Retrieved Messages Using .sort()

How to Transfer Data from SuperAgent Library Outside the .then() Block?

Issues arise when attempting to retrieve JSON data through an Ajax GET call. Specifically, an "Undefined" error occurs for all records in the JSON object