1. Fabrik 3.9 has been released. If you have updated Joomla to 3.9, this is a required update.
    Dismiss Notice

Dropdown selections unique in repeat group

Jan 20, 2018
Dropdown selections unique in repeat group

  • Disable already used dropdown options in a repeat group(top)

    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.
    Note: This code is compatible with using pre-defined events to make the dropdown readonly or disabled, and is compatible with Fabrik's Enhanced Dropdowns (which use Chosen).

    On load event(top)

    Code (Text):
    /* 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(top)

    Code (Text):
    /* 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(top)

    Code (Text):
    /* 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));