使用 jquery 从多个下拉列表中删除重复项

Question

I have a lot of dropdown lists in my HTML code that it gets its data from MySQL query I am using the distinct method but some duplicated text is still exist in it

this is my code

 var code = {}; $("select[name='get'] > option").each(function() { if (code[this.text]) { $(this).remove(); } else { code[this.text] = this.value; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-12 col-sm-6 col-lg-3"> <label for="users-list-role">Country</label> <fieldset class="form-group"> <select class="form-control select2" name="country"> <option value="">All</option> <option value="user">User</option> <option value="staff">Staff</option> </select> </fieldset> </div> <div class="col-12 col-sm-6 col-lg-3"> <label for="users-list-status">Status</label> <fieldset class="form-group"> <select class="form-control select2" name="status"> <option value="">All</option> <option value="Active">Active</option> <option value="Blocked">Blocked</option> <option value="deactivated">Deactivated</option> </select> </fieldset> </div> <div class="col-12 col-sm-6 col-lg-3"> <label for="users-list-verified">Verified</label> <fieldset class="form-group"> <select class="form-control select2" name="get"> <option value="">All</option> <option value="true">Yes</option> <option value="false">Yes</option> <option value="false">Yes</option> </select> </fieldset> </div> <div class="col-12 col-sm-6 col-lg-3"> <label for="users-list-department">Department</label> <fieldset class="form-group"> <select class="form-control select2" name="dep"> <option value="">All</option> <option value="Sales">Sales</option> <option value="Devlopment">Devlopment</option> <option value="Management">Management</option> <option value="Management">Management</option> <option value="Management">Management</option> </select> </fieldset> </div> </div>

and i have this js code to remove dublicates from only one dropdown

it work great but it only remove dublicates from one drop down list all i need is to remove dublicate from more than one dropdown

Answer 1

You can loop over all select tags and then do the same with options:

 $("select").each(function() { var code = {}; $(this).find('option').each(function() { if (code[this.text]) { $(this).remove(); } else { code[this.text] = this.value; } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-12 col-sm-6 col-lg-3"> <label for="users-list-role">Country</label> <fieldset class="form-group"> <select class="form-control select2" name="country"> <option value="">All</option> <option value="user">User</option> <option value="staff">Staff</option> </select> </fieldset> </div> <div class="col-12 col-sm-6 col-lg-3"> <label for="users-list-status">Status</label> <fieldset class="form-group"> <select class="form-control select2" name="status"> <option value="">All</option> <option value="Active">Active</option> <option value="Blocked">Blocked</option> <option value="deactivated">Deactivated</option> </select> </fieldset> </div> <div class="col-12 col-sm-6 col-lg-3"> <label for="users-list-verified">Verified</label> <fieldset class="form-group"> <select class="form-control select2" name="get"> <option value="">All</option> <option value="true">Yes</option> <option value="false">Yes</option> <option value="false">Yes</option> </select> </fieldset> </div> <div class="col-12 col-sm-6 col-lg-3"> <label for="users-list-department">Department</label> <fieldset class="form-group"> <select class="form-control select2" name="dep"> <option value="">All</option> <option value="Sales">Sales</option> <option value="Devlopment">Devlopment</option> <option value="Management">Management</option> <option value="Management">Management</option> <option value="Management">Management</option> </select> </fieldset> </div> </div>

If you have other select tags on page also, the you can specify multiple names in selector:

 $("select [name='get'], [name='dep'], [name='status']")

Answer 2

I think you could just remove [name='get'] restriction to match all dropdowns.

Or if you want, you can excplicitly enumerate all the selects using the , jQuery selector separator.

$("select[name='get'] > option, select[name='dep'] > option, ...")

Or even further, if you want to be more generic, then use a custom data attribute (for example data-noduplicates) on those you want to process this way, and match against that attribute.

$("select[data-noduplicates] > option")

...

<select ... data-noduplicates>...</select>