-
A new version of Full Calendar is now available.
See the details here
Dropdown selections unique in repeat group
- Views Views: 5,195
- Last updated Last updated:
-
Contents
Disable already used dropdown options in a repeat group
Suppose that you have a repeat group which has a Dropdown element of some type, and you want to try to ensure that each repeat row has a unique value selected for the dropdown.
The three sets of Element Javascript below provide full functionality for this.
- When a dropdown is loaded it disables any of its Options that are already in use in the repeat group.
- When a user changes the value of a dropdown, all the Options in all the dropdowns are re-evaluated to disable Options that are in use.
- The same happens when you delete a row.
On load event
Code:/* When this element == "", disable select items which have already been set in other repeat group items */
if (Fabrik.debug) fconsole('load',this.element.id);
if (this.element.value === "") {
var selects = this.element.getParent('.fabrikGroup').getElements('.fabrikRepeatGroup___' + this.origId + ' select');
selects.each(function (el) {
if (this.element.id !== el.id) {
var val = el.value;
if (val !== '') {
this.element.getElement('option[value="' + val + '"]').setAttribute('disabled', 'disabled');
}
}
}.bind(this));
}
On change event
Code:/* When this element is changed, collect the select items from all matching fields and disable them in other dropdowns */
if (Fabrik.debug) fconsole('change',this.element.id);
var values = [];
var selects = this.element.getParent('.fabrikGroup').getElements('.fabrikRepeatGroup___' + this.origId + ' select');
selects.each(function (select) {
var value = select.value;
if (value !== '' && values.indexOf(value) < 0) {
values.push(value);
}
});
selects.each(function (select) {
if (select.getAttribute('readonly') !== 'readonly' && !select.disabled) {
select.getElements('option').each(function (option) {
var value = option.value;
if (!option.selected && value !== '') {
if (values.indexOf(value) < 0) {
option.removeAttribute('disabled');
} else {
option.setAttribute('disabled', 'disabled');
}
}
});
jQuery(select).trigger("liszt:updated");
jQuery(select).trigger("chosen:updated");
}
});
On unload event
Code:/* When this element is deleted, collect the select items from all other matching fields and disable them in other dropdowns */
if (Fabrik.debug) fconsole('unload',this.element.id);
var values = [];
var selects = this.element.getParent('.fabrikGroup').getElements('.fabrikRepeatGroup___' + this.origId + ' select');
selects.each(function (select) {
if (this.element.id !== select.id) {
var value = select.value;
if (value !== '' && values.indexOf(value) < 0) {
values.push(value);
}
}
}.bind(this));
selects.each(function (select) {
if (select.getAttribute('readonly') !== 'readonly' && !select.disabled) {
select.getElements('option').each(function (option) {
var value = option.value;
if (!option.selected && value !== '') {
if (values.indexOf(value) < 0) {
option.removeAttribute('disabled');
} else {
option.setAttribute('disabled', 'disabled');
}
}
});
jQuery(select).trigger("liszt:updated");
jQuery(select).trigger("chosen:updated");
}
}.bind(this));