Yes, that will be quite easy. I’m going to do this backwards.
First there’s the show function which accepts one or two arguments. The first argument is the element to show. The second argument is optional. If present, it determines if the element is to be shown or not. This helps to prevent the need for extra logic to determine whether to call a separate show or a hide function.
function show(el, state) {
if (state === undefined) {
state = true;
}
if (state === true) {
el.style.display = '';
} else {
el.style.display = 'none';
}
}
Note: a better practice than changing the display value is to include the hasClass, addClass and removeClass functions which allows you to easily add or remove a class name of ‘hidden’ on the element, for which you will also have a css declaration for ‘hidden’ that sets the display to none.
Next up is how we’re going to keep track of the different options that are going to be monitored. Each select field could have several options, that when selected could each trigger different elements to be shown. While it’s possible to use a global array to store this information, it’s better to keep the info closer to where it’s being used.
What we can do is to add a ‘check’ object on to the element and within that check object we can set some properties, in this case they would be the value of the option and be associated to the element that will be shown.
In JSON format it would look like this:
{
'check': {
'liuna': laborersDetails,
'other': otherUnion
}
}
This means that the select element now contains all of the information that it need to know about. Whenever the select element is changed, we can loop through each of the options that need to be checked, and show or hide them where required.
function enableIfSelected() {
var select = this,
optionValue = select.options[select.selectedIndex].value,
option,
el;
for (option in select.check) {
if (select.check.hasOwnProperty(option)) {
el = select.check[option];
show(el, (option === optionValue));
}
}
}
The attachEnableIfSelected function adds the enableIfSelected function to a select field, but we also need to perform a couple of extra steps. First we should create the check object if it’s not already there, and then add to that check object the information that we’ll need for this option and its related element to be displayed. After the select field has its onchange event assigned to the enableIfSelected function, we’ll activate that event straight away which will hide the related element because it’s not currently selected.
function attachEnableIfSelected(select, value, id) {
select.check = select.check || {};
select.check[value] = document.getElementById(id);
select.onchange = enableIfSelected;
select.onchange();
}
Finally, we kick things off by specifying for which option we want to show a certain element. Because it’s a good practice to use form element names where possible, this part uses only one id attribute on the form itself, from where we can gain access to all of the other form element via their element names.
This example shows us attaching two elements on to a select elements values.
var form = document.getElementById('myForm'),
union = form.elements.union;
attachEnableIfSelected(union, 'liuna', 'laborersDetails');
attachEnableIfSelected(union, 'other', 'otherUnion');
Here is the full script code:
function show(el, state) {
if (state === undefined) {
state = true;
}
if (state === true) {
el.style.display = '';
} else {
el.style.display = 'none';
}
}
function enableIfSelected() {
var select = this,
optionValue = select.options[select.selectedIndex].value,
option,
el;
for (option in select.check) {
if (select.check.hasOwnProperty(option)) {
el = select.check[option];
show(el, (option === optionValue));
}
}
}
function attachEnableIfSelected(select, value, id) {
select.check = select.check || {};
select.check[value] = document.getElementById(id);
select.onchange = enableIfSelected;
select.onchange();
}
var form = document.getElementById('myForm'),
union = form.elements.union;
attachEnableIfSelected(union, 'liuna', 'laborersDetails');
attachEnableIfSelected(union, 'other', 'otherUnion');
