2

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

  • I think you could just remove [name='get'] to match all dropdowns. Or if you want, you can excplicitly enumerate all the selects using the , jQuery selector separator like this: $("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-nouplicates] > option"). – Zoltán Tamási 2 days ago
3

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']")
0

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>
  • it works but in some pages i have more than 10 dropdowns and the js code will be long and complicated , anyway thanks for help – ORVX 2 days ago
  • You're welcome. However, I posted 3 alternatives, and only one suffers the increase of JS code :) – Zoltán Tamási 2 days ago

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.