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

您可以遍历所有选择标签，然后对选项执行相同操作：

    
    $("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, ...")

或者甚至更进一步，如果您想变得更加通用，那么可以在要处理的对象上使用自定义数据属性（例如data-noduplicates），并与该属性进行匹配。

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

...

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

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

2 个答案: