Created
February 12, 2014 00:07
-
-
Save steveclarke/8947181 to your computer and use it in GitHub Desktop.
Company / Jobs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: arial; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="[add your bin description]" /> | |
| <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <h3>Choose a Company</h3> | |
| <select id="company"> | |
| <option value="1">PowerCo</option> | |
| <option value="2">TelCo</option> | |
| </select> | |
| <select id="jobs"> | |
| </select> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(function ($) { | |
| var POWERCO_JOBS = [ { "id": 8, "name": "Weed Whacking 1", "code": "WW-1" }, { "id": 9, "name": "Weed Whacking 2", "code": "WW-2" }, { "id": 10, "name": "Weed Whacking 3", "code": "WW-3" }, { "id": 11, "name": "Weed Whacking 4", | |
| "code": "WW-4" }, { "id": 12, "name": "Weed Whacking 5", "code": "WW-5" } ]; | |
| var TELCO_JOBS = [ { "id": 3, "name": "Tree Trimming 1", "code": "TT-1" }, { "id": 4, "name": "Tree Trimming 2", "code": "TT-2" }, { "id": 5, "name": "Tree Trimming 3", "code": "TT-3" }, { "id": 6, "name": "Tree Trimming 4", "code": | |
| "TT-4" }, { "id": 7, "name": "Tree Trimming 5", "code": "TT-5" } ]; | |
| var App = { | |
| init: function () { | |
| this.cacheElements(); | |
| this.bindEvents(); | |
| this.updateOptions(POWERCO_JOBS); | |
| }, | |
| cacheElements: function () { | |
| this.$company_sel = $('#company'); | |
| this.$jobs_sel = $('#jobs'); | |
| }, | |
| bindEvents: function () { | |
| this.$company_sel.on('change', this.updateJobs.bind(this)); | |
| }, | |
| updateJobs: function (e) { | |
| var company_id = this.$company_sel.val(); | |
| switch (company_id) { | |
| case "1": | |
| this.updateOptions(POWERCO_JOBS); | |
| break; | |
| case "2": | |
| this.updateOptions(TELCO_JOBS); | |
| break; | |
| } | |
| }, | |
| updateOptions: function (data) { | |
| var jobs_sel = this.$jobs_sel; | |
| jobs_sel.empty(); | |
| $.each(data, function(key, value) { | |
| jobs_sel.append("<option value='" + value.id + "'>" + value.name + "</option>"); | |
| }); | |
| } | |
| }; //App | |
| App.init(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment