Remove duplicates from more than one dropdown list using 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>