Tips for organizing data and dynamically linking options to another select value?

One of my challenges involves working with two select elements. The first select allows for multiple options, while the second select is dependent on the choice made in the first one.

<select class="form-control" id="select1">
  <option value="">Choose</option>
    <option value="1">select1_option1</option>
    <option value="2">select1_option2</option>
    ...
</select>

<select class="form-control" id="select2">
  <option value="">Choose</option>
  ...
</select>

The options available in select2 are determined by the selected value in select1.

To store this data in a compact format, I could use the following structure:

var select2data = {1:{11:"select2_option1",12:"select2_option2",13:"select2_option3",14:"select2_option4"},
                   2:{21:"select2_option1",22:"select2_option2"}};

For example, if the user selects value 1 in the first select, then select2 should display options as follows:

<select class="form-control" id="select2">
  <option value="">Choose</option>
  <option value="11">select2_option1</option>
  <option value="12">select2_option2</option>
  ...

I am confident in updating the values in select2, but I'm currently struggling to comprehend how to access and utilize the values stored in select2data. You can view my progress in this jsfiddle demo.

javascriptjquerydictionary

Answer №1

Follow these steps to get the desired result:

 $('#customSelect')
        .find('option')
        .remove()
        .end()

    $.each(selectData[value], function (index, value) {
        console.log(value)
        $('#customSelect').append('<option value="' + index + '">' + value + '</option>')
    })

SEE IT IN ACTION HERE:

http://jsfiddle.net/1a2b3c4d/5/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the purpose of the video-js endcard plugin incorporating native controls into the player?

Endcard is a unique plugin designed for the video-js html5 video player that adds clickable links to the end of a video. (More information on endcards can be found here: https://github.com/theonion/videojs-endcard). To implement an endcard, simply include ...

javascriptcssvideo.js

"Implementing a click event on a dynamically generated element is triggering the event for all of its parent elements

I have a task to generate a dynamic table with data retrieved from the server. Each row in the table contains a tag that I am trying to link to a click event. The code snippet below demonstrates how the dynamic table is created: function ProcessResponse ...

javascriptjqueryasp.net-mvc

Client-Specific User Portal

Looking for some support on the back end of things. We are in the process of creating a portal where users will be directed to their specific landing pages upon logging in, providing access to files they have signed up for. Our team is exploring the use ...

javascriptnode.jsmongodbreactjskeystonejs

Is there a way to showcase a jquery calendar with highlighted days that are unable to be clicked on (read only)?

I'm using the Jquery calendar to showcase daily room capacities, which is functioning well. However, I now want to display this calendar on my home screen in read-only mode. The days should not be highlighted, as there is no interactive feature and us ...

jqueryjquery-uidatepicker

Zero's JSON Journey

When I make an HTTP request to a JSON server and store the value in a variable, using console.log() displays all the information from the JSON. However, when I try to use interpolation to display this information in the template, it throws the following er ...

javascriptjsonangulartypescriptionic-framework

Ways to remove any messages containing URLs that are not www.youtube.com or www.twitter.com

Recently, I have encountered a significant issue with Discord Scam Links in my server. I attempted the following approach: if(message.content.includes("discordscam.com")) { message.delete() } However, this method is not effective as it onl ...

javascriptnode.jsdiscord.jsbots

The radio button fails to trigger the setState function in React

In my React program, I have implemented a method to update the state and modify a specific value for a Radio button: The state : class App extends Component { constructor(props) { super(props); this.state = { checked: [], expanded: [], ...

javascriptreactjs

Ways to enhance the data for my YouTube video uploads version 3

Currently facing an issue where Google has restricted my daily queries to 10,000. I am in search of a solution to adjust my chunksize either up or down. Uncertain about the exact amount to increase or decrease to limit the number of queries per upload, her ...

javascriptjquerygoogle-apiyoutube-data-api

Is bower install failing to detect a local npm package?

After running bower install, I encountered the following error message: $ bower install module.js:340 throw err; ^ Error: Cannot find module 'minimist' at Function.Module._resolveFilename (module.js:338:15) at Function.Module._l ...

javascriptangularjsnode.jsnpmbower

What is the best way to store data from multiple selected rows in different datagrids into a single state?

Programming Languages : JavaScript with React, Redux Toolkit, and Material-UI Issue : My goal is to synchronize the selection of checkboxes across multiple datagrids into one central state Attempts Made : I first attempted to manage checkbox selection fo ...

javascriptreactjsmaterial-uiredux-toolkit

dynamically assigning a style attribute based on the dimensions of an image retrieved from a URL

My aim is to determine whether or not I should use an image based on its dimensions. To achieve this, I came across a function on stack overflow that can retrieve the dimensions of an image just by using its URL. Here is the code snippet they provided: f ...

javascriptcssreactjsimagematerial-ui

How can AngularJS apps handle authentication?

Seeking input on user authentication with AngularJS and Zend... I currently have Angular on the client side and Zend on the server side handling authentication successfully. However, I'm looking for best practices and code examples for enhancing the ...

javascriptangularjszend-frameworkauthentication

The computed properties in Vue are not receiving any values when an array is passed using v-bind

Embarking on my Vue journey with a simple example, I am attempting to calculate the sum of items based on the provided data. If you wish to explore the complete example, it can be accessed in this jsffile. Here is the component structure: Vue.component(&a ...

javascriptvue.jsvuejs2vue-component

js/jquery Asynchronous Loading of Content Replaces Existing Page Content

I have encountered a problem that I am hoping someone can assist me with. Here is the issue: A partner of mine has given me a code to use on my website, which will display certain content that I am interested in. However, this content is only relevant to ...

javascriptjqueryajax

Bringing in States and Functions to a React Component

Is there a way to improve the organization of states and functions within a functional React Component? Here's my current code structure: import React from 'react' //more imports... const Dashboard = () => { const [] = useState() / ...

javascriptreactjsimportreact-hooksstate

What is the best way to conceal just the scrollbar thumb in a Bootstrap modal?

When opening a modal in Bootstrap according to the documentation, it only hides the scrollbar thumb, like shown in the examples below: However, my modal hides the entire scrollbar. How can I modify it to hide only the scrollbar thumb? body { height: ...

jquerycsstwitter-bootstrapbootstrap-4bootstrap-modal

Within an Angular test scenario, execute a static method from a service that triggers an HTTP get request to fetch stored JSON data. This data is then retrieved and returned back to the service

Currently, I am facing a challenge in my Angular test case where I am trying to load JSON data via an HTTP call. The issue arises when a static method is called from a service spec file named "url-service.spec" to another service named "load-json.service. ...

javascriptangulartypescriptjasmine

Displaying file when JQuery dialog is opened

I am utilizing a JQuery dialog to load a partial view within it. $("#WOdialog").dialog({ width: 765, resizable: false, closeOnEscape: true, modal: true, clos ...

javascriptasp.netajaxjquery-ui-dialogjqxhr

Retrieving data from a subcollection in a cloud firestore database does not yield any results

In my Next.js application, I am utilizing Cloud Firestore database to store user documents. The structure of the collection path is as follows: collection "userDocs" └─ document "userEmail" └─ collection "docs" └─ document "document ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Tips for displaying a removal option and eliminating an uploaded document

I need assistance in implementing file uploading using dropzone.js. I am struggling to find a solution on how to delete uploaded files. Here is the code snippet: index.php <div class="container"> <div class="file_upload"> <form action= ...

javascriptphpjquerydropzone.js