Удалить дубликаты из нескольких раскрывающихся списков, используя jquery

Question

У меня есть много выпадающих списков в моем коде HTML, который получает свои данные из запроса MySQL Я использую отдельный метод, но в нем все еще есть дублированный текст

это мой код

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>

и у меня есть этот код js для удаления дубликатов только из одного раскрывающегося списка

он отлично работает, но удаляет дубликаты только из одной капли все, что мне нужно, это удалить дубликат из более чем одного раскрывающегося списка

Answer 1

Вы можете l oop по всем выбранным тегам, а затем сделать то же самое с параметрами:

    
    $("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>

Если у вас есть и другие теги выбора на странице, вы можете указать несколько имен в селекторе:

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

Answer 2

Я думаю, вы можете просто удалить ограничение [name='get'], чтобы соответствовать всем выпадающим спискам.

Или, если хотите, вы можете явно перечислить все варианты выбора, используя jQuery разделитель селекторов.

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

Или даже далее, если вы хотите быть более универсальным c затем используйте пользовательский атрибут данных (например, data-noduplicates) для тех, которые вы хотите обработать таким образом, и сопоставьте с этим атрибутом.

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

...

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