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:
- Open the form in
design mode.
- Add a DropDownList control to the form design workspace and set its ID property to DropDownList1.
- Select Unmapped Source in the Data Source property and add values as follows:
Press Apply when you finish entering the static values. Please note that you can use mapped source as a Data Source property. - Select the DropDownList1.
- In the
Rules pane, click on the Add icon to add a new rule, the
Rule Manager dialog will open.

- 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. - Test the form by clicking on the
Preview button in the
View Group.