-
Notifications
You must be signed in to change notification settings - Fork 1
/
CascadingDropdown.js
131 lines (112 loc) · 3.54 KB
/
CascadingDropdown.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
var CascadingDropdown = (function () {
'use strict';
//
// Variables
//
var cascadingDropdown = {};
var defaults = {
selector: '.cascadingDropdown'
};
//
// Methods
//
var ParentParms = function(element) {
var parms = {};
var parentFields = element.getAttribute('data-parent-fields');
if (parentFields)
{
var parentIds = parentFields.split(',');
for (var i=0; i<parentIds.length; i++)
{
parms[parentIds[i]] = document.querySelector('#'+parentIds[i]).value;
}
}
return parms;
}
var CheckDropdownDependencies = function(element,source) {
var changedElementId = element.id;
var cascadingDropdowns = document.querySelectorAll(cascadingDropdown.selector);
for (var i=0; i < cascadingDropdowns.length; i++)
{
var dropdown = cascadingDropdowns[i];
var parentIds = (dropdown.getAttribute('data-parent-fields')||'').split(',');
// Does the cascading dropdown have the changedElementId as a parent?
if (parentIds.indexOf(element.id) > -1)
{
PopulateDropdown(dropdown,source);
}
}
}
var PopulateDropdown = function (element) {
//
// Inits & Event Listeners
//
var url = element.getAttribute('data-url');
var parms = ParentParms(element);
// Disable dropdown to prevent selections during load
element.disabled=true;
var optionData = cascadingDropdown.source(url,parms,function(optionData){
var existingValue = element.value;
//Clear existing options
element.textContent=undefined;
var option = document.createElement('option');
option.selected=true;
option.disabled=true;
if (optionData)
{
option.textContent = element.getAttribute('data-select-message');
element.appendChild(option);
for (var i=0; i < optionData.length; i++)
{
//Add to options
option = document.createElement('option');
option.textContent = optionData[i].Text;
option.setAttribute('value',optionData[i].Value);
element.appendChild(option);
}
// Reenable if more than just the instruction text exists
if (optionData.length > 0)
{
element.disabled=false;
}
}
// see if the previous value still exists and set it
if (existingValue)
{
// this if is to prevent an issue in IE where it tries to set the default select message when disabled
if (existingValue != element.getAttribute('data-select-message')) {
for (var i=0; i<element.options.length; i++)
{
if (element.options[i].value == existingValue)
{
element.value=existingValue;
}
}
}
}
});
};
//
// Inits & Event Listeners
//
cascadingDropdown.init = function(options) {
this.selector = options.selector || defaults.selector,
this.source = options.source;
var dropdowns = document.querySelectorAll(cascadingDropdown.selector);
//Initialize dropdowns that are not dependent on other values
for (var i=0; i < dropdowns.length; i++)
{
var element = dropdowns[i];
PopulateDropdown(element);
}
// Listen to changes to dropdowns
document.addEventListener('change', function(event){
if (event.target.matches(cascadingDropdown.selector))
{
var element = document.querySelector("#"+event.target.id);
CheckDropdownDependencies(element);
}
},false);
}
return cascadingDropdown;
})();