Incorporate a dropdown menu based on the selection made in another dropdown menu

I have a scenario on my website where I want to dynamically add select boxes based on the value selected in the previous one. Here is the code snippet:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js">   
</script>
<script type="text/javascript"     
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js">  
</script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
</style>
<script type="text/javascript">//<![CDATA[ 
 $(function() {
        $('#colorselector').change(function(){
            $('.colors').hide();
           $('#' + $(this).val()).show();
      });
   });
//]]>  
</script>

<select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
</select>

<div id="red" class="colors" style="display:none"> <select id="colorselector">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>  </div>

<div id="yellow" class="colors" style="display:none"> 
<select id="colorselector">
<option value="one">one</option>
 <option value="two">two</option>
 <option value="three">three</option>
 </select> 
 </div>


<div id="one" class="colors" style="display:none"> one... </div>
<div id="two" class="colors" style="display:none"> 
<select id="colorselector">
<option value="one">four</option>
<option value="two">five</option>
<option value="three">six</option>
</select> 

</div>

Although I managed to display the second select box based on selection, I am facing challenges in adding a third one dynamically.

Answer №1

It has been mentioned previously that IDs need to be unique.

Try:

Blue > five

http://example.com

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

Root scope digest trigger delay

When invoking $scope.$apply() ten times consecutively, it is expected that ten root scope digests will occur. If the call to $scope.$apply() is debounced so that the trailing call always completes, can we assume that the final state of the application rem ...

Retrieve a markdown file from the system and render it as a string using React.js

Is there a way to load a markdown file from the current directory as a string in my code? This is the scenario: import { State } from "markup-it" ; import markdown from "markup-it/lib/markdown"; import bio from './Bio.md' const m ...

The elusive Ajax seems to be slipping through our grasp,

I am currently working on a website app to display the availability of PCs in my University using JSON data from the University website and AJAX. I am facing an issue where it shows all the MACs for the first room, but returns undefined for others. Since t ...

Replace the JS function in the bundle with a new custom function

I have compiled my AngularJS website using webpack. While in the Chrome console, I am trying to override a function within the controller of a particular directive. Is this achievable? ...

Failed PHP response when jQuery was called

I'm working on a project that involves two files: one PHP and one HTML. The HTML file acts as the user interface where users input their queries, while the PHP file handles the processing and events before returning the output back to the HTML file. I ...

Guide to creating animations with javascript/react js

My attempt at altering the opacity of an element every 100 milliseconds following a click event has not been successful. The function change is triggered by a click, yet the code does not work as intended. Here's what I have so far: function change (i ...

Retrieve an element within a jQuery each loop

I'm currently implementing AJAX functionality to retrieve cart items from the server and display them within a cart when a customer clicks on the "My Cart" button. Here is the model for the cart: public class Cart { [Key] public i ...

Angular 4 after ejection, coupled with automated end-to-end testing using Protractor/Selenium setup

I am attempting to conduct end-to-end tests using Protractor/Selenium on an Angular 4 project that has been ejected. Here is my package.json: ... "scripts": { "pree2e": "webdriver-manager update --standalone false --gecko false --quiet node", "e2 ...

Applying a CSS class to a newly generated row with JavaScript

I have a JSP page where I dynamically add rows to a table using a different Javascript function than in my previous query. While I can add elements to the table columns, I'm unable to apply a style class that is defined in a CSS file. Here is my Java ...

Having trouble getting the AJAX script to change the background in Internet Explorer?

I'm currently experiencing an issue with an ajax script. Here is the code I am using: <script type="text/javascript"> $(document).ready(function() { $('#savecolor').click(function(){ var myVar = 'data= ...

Looking for a .NET MVC AJAX search solution. How can I enhance the code below?

I am looking to implement a search functionality using AJAX. I have tried using the get method in my controller by passing the search string, but it is not working as expected. Below is a snippet of my controller code, where I retrieve the search value fr ...

Guide to utilizing jQuery for setting values in all subsequent rows of a table

I have a table with 15 rows of text boxes labeled as text1, text2, and so on up to text15. If I enter text into, let's say, the 5th textbox, I want that same text to be automatically copied into all subsequent textboxes from the 6th through the 15th. ...

What do you notice about interactions involving 'input type=text' in HTML and JavaScript?

When a new binding is created for the value property on an input, any manual modifications by the user no longer update the value. What happens when the binding is altered? Does regular user interaction involve key press listeners? I've modified the ...

How to Display a Modal Window Automatically Using Bootstrap.js?

Recently, I've become interested in using the Bootstrap library by Twitter for my simple web page. My goal is to have a modal window automatically display after the page loads. If anyone has any tips on how to achieve this, I would greatly appreciate ...

I am experiencing difficulty in detecting variable changes within my $scope function

I'm encountering an issue where a variable isn't being updated in a $scope function when there's a state change event. Despite seeing the variable update in the event listener, it doesn't reflect in the function. The code snippet in qu ...

Failing to utilize callback functions results in forgetting information

I am facing an issue with my code where changes in the parent component trigger a re-render of the child element. The Menu component is supposed to appear on right-click on top of the placeholder tag, but when it does, the entire parent component flicker ...

jQuery sidebar with a fixed position

Is there a way to implement a sidebar menu feature using jQuery that reappears on the left as the user scrolls down the page? You can see an example sidebar menu here. ...

Struggling with Implementing jQuery for Triggering Multiple Functions on a Single Change Event?

I am currently developing jQuery functions that create dependencies between the css classes of different inputs in a web form. For example, when a specific input has a certain value, the "hide" class is removed from another input. One working example of t ...

The correct reading of JavaScript in HTML is a common source of confusion

After creating a basic application using the code provided in a forum thread and testing it on the worker sandbox MTurk site, I noticed a peculiar issue. The application runs smoothly when following the code from the forum answer directly. However, when at ...

Conceal a Component within an Embedded Frame

Hey there! I've been attempting to hide a header within an iframe, but it seems like my code isn't doing the trick. Could someone take a look and help me diagnose why the header is still visible? Thanks in advance! <iframe id="booking_iframe" ...