Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


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

Posted on 2016-11-17
Medium Priority
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 2000 total points
ID: 41892417
check this page : https://jsfiddle.net/8hz213z8/

You need only this in your page, you don't need jQuery :
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></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 = attrs.name;
      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 : https://docs.angularjs.org/guide/directive

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

730 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