jQuery - Drop down selection populated with dropdown selection from another list.

Posted on 2016-11-17
Last Modified: 2016-11-18
Just a quick note: I have also asked this on other forums. I have a feeling that this is something that may end up helping a lot of developers, so even if I get an answer somewhere else (or figure this out before then), I will post it here as well.

What I wish to do, simply and distinctly is:

1. a) Select an option on the "first dropdown list (Fruit)".
    b) Set the default value on the "second dropdown list (Fruit_Types)", based upon the selection of the first.
2. Optimally all values (under Fruit_Types) related to the First selection value would be populated in the second selection box.
3.  Use one small jQuery function to do this and have no reference to the jQuery on the selection list. In other words I should be able to drop this in to any html page with any two related lists (see code) and it should work. The jquery should be completely autonomous.
4. This code should be useful in a WordPress, Drupal, Joomla environment where you may or may not have excellent access to the DropDown lists being made, just the ids.

I would appreciate any help at all with this.

Please let me know if someone can help me get this to work properly. Thank You.

Most of the work is already done (see code), however I would like this to work all the time, every time. So far it only works under these conditions:

1.    On Page Refresh/Load
2.    One time after the page loads

Then it stops working.

Here is my code:

Question by:Richard Bennett
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
LVL 82

Accepted Solution

leakim971 earned 500 total points
ID: 41892417
check this page :

You need only this in your page, you don't need jQuery :
<script src="//"></script>

<div ng-app="appFruits" ng-controller="ctrlFruits">
  <p>Select the top list and the second list should populate with the corresponding related values.</p>
  <cascade-dropdown name="fruits1" what='[{"name":"Apples","varieties":["Apples Greens","Apples Red","Apples Granny Smith","Appels Fuji"]},{"name":"Oranges","varieties":["Oranges California","Oranges Florida","Oranges Blood","Oranges Seedless"]}]'></cascade-dropdown>
  <cascade-dropdown name="fruits2" what='[{"name":"Apples","varieties":["Apples Greens","Apples Red","Apples Granny Smith","Appels Fuji"]},{"name":"Oranges","varieties":["Oranges California","Oranges Florida","Oranges Blood","Oranges Seedless"]}]'></cascade-dropdown>  
  <cascade-dropdown name="cars" what='[{"name":"BMW","varieties":["X5","X8"]},{"name":"Audi","varieties":["TT","R8"]}]'></cascade-dropdown>  

Open in new window

var app = angular.module("appFruits",[]);
var ctrl = app.controller("ctrlFruits", ["$scope", function($scope) {}]);
ctrl.directive("cascadeDropdown", ["$compile", function($compile) {
  return {
    restrict: "E",
    link: function(scope, element, attrs, controllers) {
    	var n =;
      scope[n+"s"] = angular.fromJson(attrs.what);
      scope[n] = scope[n+"s"][0];
      scope.$watch(n, function() {
        scope[n+"_variety"] = scope[n].varieties[0];
      var dd1 = "<select ng-model='" + n + "' ng-options='" + n + ".name for " + n + " in " + n + "s'></select>";
      var dd2 = "<select ng-model='" + n + "_variety' ng-options='o as o for o in " + n + ".varieties'></select>";
      var html = dd1 + "&nbsp;" + dd2;

Open in new window

More infos here :

Author Comment

by:Richard Bennett
ID: 41893992

Thank you so much for your answer,  but I have already created the function. Take a look at the file attached. I needed to have it written in jQuery, because I am working in Wordpress and Angular is not installed. Plus the pages are dynamically generated, I have no direct access to the code to put in separate inline ID's, and classes. Also, the selections lists are built using Metaboxes and Templates so I need to have code that can manipulate the DOM, without me having to rewrite the HTML - i.e. - all the magic has to happen externally.

I am so sorry if I did not put this in my original post. I greatly appreciate your answer.



Author Closing Comment

by:Richard Bennett
ID: 41893993
Thank you Leakim for your assistance.

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
links not working 2 34
Increase counter and attr inside a while loop 15 49 mvc5 6 33
I'm looking for a dynamic length jQuery/javascript currency editor mask? 2 64
Introduction HyperText Transfer Protocol ( or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question