Skip to content

Instantly share code, notes, and snippets.

@saltavenger

saltavenger/jsbin.qiwep.html

Created March 24, 2014 20:31
Show Gist options
  • Save saltavenger/9748504 to your computer and use it in GitHub Desktop.
Save saltavenger/9748504 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.qiwep.html
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<label for="aaship" class="label">AAship(s)</label> <select id="aaship" name="aaship" class="kendoInput" multiple></select>
<label for="office" class="label disabled">Office</label>
<select id="office" name="office" class="kendoInput" multiple></select>
<label for="division" class="label disabled">Division</label> <select id="division" name="division" class="kendoInput" multiple></select>
</body>
</html>
Raw
jsbin.qiwep.js
var offices = {
"OA": [
{ text: "EAB", value: "EAB"},
{ text: "OCR", value: "OCR"}
],
"OAR": [
{ text: "OAP", value: "OAP"},
{ text: "OAQPS", value: "OAQPS"},
{ text: "OPAR", value: "OPAR"},
{ text: "ORIA", value: "ORIA" },
{ text: "OTAQ", value: "OTAQ" }
],
"OARM": [
{ text: "OAA", value: "OAA"},
{ text: "OGD", value: "OGD"}
],
"OCHP": [
{ text: "OA", value: "OA" }
],
"OCSPP": [
{ text: "OPP", value: "OPP" },
{ text: "OPPT", value: "OPPT" },
{ text: "OSCP", value: "OSCP" }
],
"OECA": [
{ text: "OC", value: "OC" },
{ text: "OCE", value: "OCE" }
],
"OEI": [
{ text: "OIAA", value: "OIAA" },
{ text: "OIC", value: "OIC" }
],
"OGC": [
{ text: "Ethics", value: "Ethics" },
{ text: "GLO", value: "GLO" },
{ text: "PTSLO", value: "PTSLO" }
],
"OP": [
{ text: "NCEE", value: "NCEE" }
],
"ORD": [
{ text: "NCEA", value: "NCEA" }
],
"OSWER": [
{ text: "OEM", value: "OEM" },
{ text: "ORCR", value: "ORCR" },
{ text: "OSRTI", value: "OSRTI" },
{ text: "OUST", value: "OUST" }
],
"OW": [
{ text: "OGWDW", value: "OGWDW" },
{ text: "OST", value: "OST" },
{ text: "OWM", value: "OWM" },
{ text: "OWOW", value: "OWOW" }
],
"R01": [
{ text: "OAR", value: "OAR" },
{ text: "OEP", value: "OEP" }
],
"R02": [
{ text: "OAR", value: "OAR" }
],
"R03": [
{ text: "OW", value: "OW" }
],
"R04": [
{ text: "OAR", value: "OAR" }
],
"R05": [
{ text: "ARD", value: "ARD" },
{ text: "WD", value: "WD" }
],
"R06": [
{ text: "R06", value: "R06" }
],
"R07": [
{ text: "Air Division", value: "Air Division" }
],
"R08": [
{ text: "OAR", value: "OAR" }
],
"R09": [
{ text: "Air Division", value: "Air Division" },
{ text: "OAR", value: "OAR" }
],
"R10": [
{ text: "RA", value: "RA" }
]
};
var divisions = {
"OAP": [
{ text: "CAMD", value: "CAMD" },
{ text: "CCD", value: "CCD" },
{ text: "CPPD", value: "CPPD" },
{ text: "OAR", value: "OAR" },
{ text: "SPD", value: "SPD" }
],
"OAQPS": [
{ text: "AQAD", value: "AQAD" },
{ text: "AQPD", value: "AQPD" },
{ text: "HEID", value: "HEID" },
{ text: "OID", value: "OID" },
{ text: "SPPD", value: "SPPD" }
],
"ORIA": [
{ text: "RPD", value: "RPD" }
],
"OTAQ": [
{ text: "ASD", value: "ASD" },
{ text: "CCD", value: "CCD" },
{ text: "CD", value: "CD" },
{ text: "TCD", value: "TCD" },
{ text: "TRPD", value: "TRPD" }
],
"OGD": [
{ text: "NPTCD", value: "NPTCD" }
],
"OA": [
{ text: "Program Implementation and Coordination Division", value: "Program Implementation and Coordination Division" }
],
"OPP": [
{ text: "AD", value: "AD" },
{ text: "BPPD", value: "BPPD" },
{ text: "FEAD", value: "FEAD" },
{ text: "PRD", value: "PRD" },
{ text: "RD", value: "RD" }
],
"OPPT": [
{ text: "CCD", value: "CCD" },
{ text: "Chemical Control Division", value: "Chemical Control Division" },
{ text: "EAD", value: "EAD" },
{ text: "NCPD", value: "NCPD" },
{ text: "NPCD", value: "NPCD" },
{ text: "National Program Chemicals Division", value: "National Program Chemicals Division" }
],
"OCSP": [
{ text: "EACPD", value: "EACPD" }
],
"OC": [
{ text: "ETDD", value: "ETDD" }
],
"OCE": [
{ text: "AED", value: "AED" }
],
"OIAA": [
{ text: "EAD", value: "EAD" },
{ text: "TRIPD", value: "TRIPD" }
],
"OIC": [
{ text: "CSD", value: "CSD" }
],
"OEM": [
{ text: "ER Staff", value: "ER Staff" },
{ text: "OPC", value: "OPC" },
{ text: "PDS", value: "PDS" },
{ text: "RPDD", value: "RPDD" }
],
"ORCR": [
{ text: "MRWD", value: "MRWMD" },
{ text: "PIID", value: "PIID" }
],
"OSRTI": [
{ text: "ARD", value: "ARD" },
{ text: "Assessment and Remediation Division", value: "Assessment and Remediation Division" }
],
"OGWDW": [
{ text: "DWPD", value: "DWPD" },
{ text: "SRM", value: "SRM" },
{ text: "SRMD", value: "SRMD" }
],
"OST": [
{ text: "EAD", value: "EAD" },
{ text: "HECD", value: "HECD" },
{ text: "SHPD", value: "SHPD" },
{ text: "Standards and Health Protection Division", value: "Standards and Health Protection Division" }
],
"OWM": [
{ text: "Municipal Support Division", value: "Municipal Support Division" },
{ text: "Rural Branch", value: "Rural Branch" },
{ text: "WPD", value: "WPD" },
{ text: "Water Permits Division", value: "Water Permits Division" },
{ text: "Water Permits Division (WPD)", value: "Water Permits Division (WPD)" }
],
"OWOW": [
{ text: "AWPD", value: "AWPD" },
{ text: "MCPS", value: "MCPS" },
{ text: "OCPD", value: "OCPD" }
],
"R05": [
{ text: "RMD", value: "RMD" }
],
"R06": [
{ text: "6PD", value: "6PD" },
{ text: "Planning and Permitting Division (6PD)", value: "Planning and Permitting Division (6PD)" }
],
"OAR": [
{ text: "OAR", value: "OAR" },
{ text: "Air Division", value: "Air Division" }
],
"Air Division": [
{ text: "Air Planning and Air Permits Offices", value: "Air Planning and Air Permits Offices" }
]
};
function updateCascade1(value){
//value = aaship names, cascadeSource = array for kendo data
var cascadeSource = [];
if(value !== undefined && value !== null){
var multiArray = [];
//if one aaship is chosen
if(value.length === 1){
//enable office multiselect
$('label[for="office"]').removeClass('disabled');
$("#office").data("kendoMultiSelect").enable();
cascadeSource = offices[value];
$('#office').data('kendoMultiSelect').setDataSource(cascadeSource);
}
//if more than one aaship is chosen
else{
//disable and clear values office and division
$('#office').data('kendoMultiSelect').setDataSource(cascadeSource);
$('label[for="office"]').addClass('disabled');
$('label[for="division"]').addClass('disabled');
$("#office").data("kendoMultiSelect").value([]);
$("#division").data("kendoMultiSelect").value([]);
$("#office").data("kendoMultiSelect").enable(false);
$("#division").data("kendoMultiSelect").enable(false);
}
}
else{
//disable and clear values office and division
$('#office').data('kendoMultiSelect').setDataSource(cascadeSource);
$('label[for="office"]').addClass('disabled');
$('label[for="division"]').addClass('disabled');
$("#office").data("kendoMultiSelect").value([]);
$("#division").data("kendoMultiSelect").value([]);
$("#office").data("kendoMultiSelect").enable(false);
$("#division").data("kendoMultiSelect").enable(false);
}
}
function uniqueTest(arr) {
var n, i, r;
var arrResult = {},
unique = [];
//for object in array
for (i = 0, n = arr.length; i < n; i++) {
var item = arr[i];
/*take arrays in original array objects
* adds to new object in arrResult using text and value,
* if text and value are unique it creates a new object with the array,
* if duplicate it overwrites the contained array-- which doesn't matter because it's a duplicate.
*/
arrResult[item.text + " - " + item.value] = item;
}
i = 0;
for (item in arrResult) {
//takes text,value arrays out of objects and stores them in a new array "unique"
unique[i++] = arrResult[item];
}
return unique;
}
function updateCascade2(value){
//value = office names, cascadeSource = array for kendo data
var cascadeSource = [];
//clear division input
$("#division").data("kendoMultiSelect").value([]);
if(value !== undefined && value !== null){
//enable division multiselect
$('label[for="division"]').removeClass('disabled');
$("#division").data("kendoMultiSelect").enable();
var multiArray = [];
//if one office is chosen
if(value.length === 1){
cascadeSource = divisions[value];
if(cascadeSource !== undefined){
$('#division').data('kendoMultiSelect').setDataSource(cascadeSource);
}
//if office isn't in the division array
else{
cascadeSource = [];
$('#division').data('kendoMultiSelect').setDataSource(cascadeSource);
}
}
//if more than one chosen
else{
//how many offices
var howMany = value.length;
var count = 0;
var prevArray = [];
while(howMany > 0){
//get array based on index
var multiValue = value[count];
multiArray = divisions[multiValue];
if(multiArray !== undefined){
//concatinate current array with previous array and add to datasource
cascadeSource = multiArray.concat(prevArray);
prevArray = multiArray;
}
howMany -= 1;
count ++;
}
//run unique test to get rid of duplicate objects
cascadeSource = uniqueTest(cascadeSource);
$('#division').data('kendoMultiSelect').setDataSource(cascadeSource);
}
}
else{
//disable and clear division multiselect
$('#division').data('kendoMultiSelect').setDataSource(cascadeSource);
$('label[for="division"]').addClass('disabled');
$("#division").data("kendoMultiSelect").enable(false);
}
}
$(document).ready(function(){
$('#aaship').kendoMultiSelect({
dataTextField: 'text',
dataValueField: 'value',
dataSource: [
{ text: "OA", value: "OA"},
{ text: "OAR", value: "OAR"},
{ text: "OARM", value: "OARM"},
{ text: "OCSPP", value: "OCSPP"},
{ text: "OCFO", value: "OCFO"},
{ text: "OECA", value: "OECA"},
{ text: "OEI", value: "OEI"},
{ text: "OGC", value: "OGC"},
{ text: "OITA", value: "OITA"},
{ text: "OP", value: "OP"},
{ text: "ORD", value: "ORD"},
{ text: "OSWER", value: "OSWER"},
{ text: "OW", value: "OW"},
{ text: "Region 1", value: "R01"},
{ text: "Region 2", value: "R02"},
{ text: "Region 3", value: "R03"},
{ text: "Region 4", value: "R04"},
{ text: "Region 5", value: "R05"},
{ text: "Region 6", value: "R06"},
{ text: "Region 7", value: "R07"},
{ text: "Region 8", value: "R08"},
{ text: "Region 9", value: "R09"},
{ text: "Region 10", value: "R10"}
],
change: function(e){
//on change retrieve values for office
updateCascade1($('#aaship').val());
//refresh office multiselect
$('#office').data('kendoMultiSelect').refresh();
},
suggest: true
});
$('#office').kendoMultiSelect({
dataTextField: 'text',
dataValueField: 'value',
suggest: true,
enable: false,
change: function(e){
updateCascade2($('#office').val());
$('#division').data('kendoMultiSelect').refresh();
}
});
$('#division').kendoMultiSelect({
dataTextField: 'text',
dataValueField: 'value',
suggest: true,
enable: false
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment