使用 jquery 從多個下拉列表中刪除重復項

Question

我的 HTML 代碼中有很多下拉列表，它從 MySQL 查詢中獲取數據 我使用的是 distinct 方法，但其中仍然存在一些重復的文本

這是我的代碼

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

或者更進一步，如果你想要更通用，那么在你想要以這種方式處理的那些上使用自定義數據屬性（例如數據節點），並與該屬性匹配。

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

...

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