Develop a pair of linked drop-down menus using JSON information

Question

Develop a pair of linked drop-down menus using JSON information

I am currently developing a feature that involves creating two dependent lists using values extracted from a JSON variable.

The data is structured like this:

{
      "Name1": [
        {
          "Name1_Nickname": "ID1"
        }
      ],
      "Name2": [
        {
          "Name2_Nickaname": "ID2"
        }
      ],
      "Name3": [
        {
          "Name3_Nickname1": "ID3_1"
        }, {
          "Name3_Nickname2": "ID3_2"
        }
      ]
    }

Currently, I am working with a

Map<String,List<Map<String,String>>>

which I parsed into a JSON object. My goal is to create a primary Picklist containing all the options such as Name1, Name2, and Name3, then based on the selection of a certain Name, generate a secondary picklist displaying corresponding nicknames like Name1_Nickname for Name1 or Name3_Nickname1, Name3_Nickname2 for Name3.

javascript json visualforce

Answer 1

Answer №1

One way to dynamically populate select options based on an object is by looping through the object properties. Additionally, you'll need to create an event listener for when the first select option changes.

var items = {
      "Name1": [
        {
          "Name1_Nickname": "ID1"
        }
      ],
      "Name2": [
        {
          "Name2_Nickaname": "ID2"
        }
      ],
      "Name3": [
        {
          "Name3_Nickname1": "ID3_1"
        }, {
          "Name3_Nickname2": "ID3_2"
        }
      ]
    };

var one = document.getElementById("one");
var two = document.getElementById("two");

// Loop through object properties to populate the first select
for(var prop in items) {
  var option = new Option(prop, prop);
  one.appendChild(option);
}

// Add event listener for the first select change
one.addEventListener("change", function(e) {
  var value = e.target.value;
  
  // Clear the second select options
  for(var i = two.options.length; i > 0; i--) {
    two.options[i - 1].remove();
  }
  
  // Populate the second select based on the selected item
  items[value].forEach(function(item) {
    for (var itemProp in item) {
      var option = new Option(itemProp, item[itemProp]);
      two.appendChild(option);
    }
  });
  
});

// Trigger a change event to set default options in the second dropdown
var changeEvent = new Event('change');
one.dispatchEvent(changeEvent);

<select id="one"></select>
<select id="two"></select>

Answer 2

One way to dynamically populate select options based on an object is by looping through the object properties. Additionally, you'll need to create an event listener for when the first select option changes.

var items = {
      "Name1": [
        {
          "Name1_Nickname": "ID1"
        }
      ],
      "Name2": [
        {
          "Name2_Nickaname": "ID2"
        }
      ],
      "Name3": [
        {
          "Name3_Nickname1": "ID3_1"
        }, {
          "Name3_Nickname2": "ID3_2"
        }
      ]
    };

var one = document.getElementById("one");
var two = document.getElementById("two");

// Loop through object properties to populate the first select
for(var prop in items) {
  var option = new Option(prop, prop);
  one.appendChild(option);
}

// Add event listener for the first select change
one.addEventListener("change", function(e) {
  var value = e.target.value;
  
  // Clear the second select options
  for(var i = two.options.length; i > 0; i--) {
    two.options[i - 1].remove();
  }
  
  // Populate the second select based on the selected item
  items[value].forEach(function(item) {
    for (var itemProp in item) {
      var option = new Option(itemProp, item[itemProp]);
      two.appendChild(option);
    }
  });
  
});

// Trigger a change event to set default options in the second dropdown
var changeEvent = new Event('change');
one.dispatchEvent(changeEvent);

<select id="one"></select>
<select id="two"></select>

Develop a pair of linked drop-down menus using JSON information

Answer №1

Similar questions

Secure your API routes in NextJS by using Passport: req.user is not defined

"Trouble encountered when submitting data to an external system by writing the image source - issues with Firefox and

What's the best way to create flying text effects - using CSS or JavaScript

Tips for Resolving SyntaxError: Unexpected token = When Class Import is Done

Ensuring Form Security with JQuery Validation

React-router-dom v6 causing MUI Drawer to not render

The variable "payload" within the messaging.onMessage() function in AngularJS (version 1.6) is returning as undefined when using FCM

How does spring-web handle the serialization and deserialization of data objects into JSON during an HTTP request?

Feeling lost when it comes to updating CRUD operations following the integration with mlab

JavaScript animation for sequencing traffic lights

Displaying an overlay using jQuery's .fadeIn() method after switching to another browser tab

Is there a Node.js method that is similar to jQuery AJAX's .complete() function

Encountered an error while running npm run dev on a NextJS application due to an

Tips on how to choose all elements that do not include a specific value or group of values in cypress

The HTML button failed to toggle on in Div's previous attempt

Error encountered while trying to send an array list using the $.ajax function in jQuery

Having trouble with a JQuery selector not functioning properly when trying to select a class in the HTML that contains a

Retrieve the subdomain from within the passport FacebookTokenStrategy and GoogleStrategy

Stop the change event from occurring on a textarea when the user clicks on an external cancel button

Extract JSON information from a given URL and showcase it in a tabular format on a display