Solved

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

Posted on 2016-11-17
3
61 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
[X]
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
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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)
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…

749 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