​​How to remove duplicate values from a DropdownList or Lookup controls?

Last Update: November 22, 2017

Here are the steps on how to remove the duplicate values from a DropDownList or Lookup controls. In this case, we will use a DropDownList control and the same steps can be applied on Lookup control.

Here are the steps on how to do that:

  1. Open the form in design mode.
  2. Add a DropDownList control to the form design workspace and set its ID property to DropDownList1.
  3. Select Unmapped Source in the Data Source property and add values as follows:
    How to remove duplicate values from a DropdownList or Lookup controls.jpg
    Press Apply when you finish entering the static values. Please note that you can use mapped source as a Data Source property.
  4. Select the DropDownList1.
  5. In the Rules pane, click on the Add icon to add a new rule, the Rule Manager dialog will open.
    How to auto-shifting Panel control in a form2.jpg
  6. Add a new rule as follows:
    A. Change the Rule Name as desired.
    B. Change the Rule Type to Action.
    C. Change the Event Type to onChange. Check "Execute if event triggered only on this control".
    D. In the Action section, type the following script:
         var ListValues = {};
         $('#DropDownList1').find('option').each(function() {
         var txt = $(this).attr('value');
         txt = txt.toUpperCase();
         if (ListValues[txt]) {
         $(this).remove();
         } else {
        ListValues[txt] = true;
        }
        });

    E. Click on the Save button to save the rule.
    Note: You can use Assistance Panel to help you adding functions and related parameters, form variables and form controls to Conditions and/or Actions sections.
  7. Test the form by clicking on the Preview button in the View Group.