Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Company / Jobs
body {
font-family: arial;
}
<!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>
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
You can’t perform that action at this time.