Solved

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

Posted on 2016-11-17
3
19 Views
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:

Selection_Tester.html
0
Comment
Question by:Richard Bennett
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 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>
  <br/>
  <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>
  <br/>
  <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>  
  <br/>
  <cascade-dropdown name="cars" what='[{"name":"BMW","varieties":["X5","X8"]},{"name":"Audi","varieties":["TT","R8"]}]'></cascade-dropdown>  
</div>

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;
    	element.html(html);
      $compile(element.contents())(scope);
    }
  };
}]);

Open in new window


More infos here : https://docs.angularjs.org/guide/directive
0
 

Author Comment

by:Richard Bennett
ID: 41893992
Leakim971,

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.

Sincerely,

Richard
Selection_Tester2.html
0
 

Author Closing Comment

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

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now