CODEWITHSUNDEEP
javascriptjquery
Ravi
Ravi

Reputation: 49

Remove duplicate empty values from select tag

I have below select tag

<select id="subCategorySelected">
    
   <option value="Select Sub Category">Select Sub Category</option>
                    
   <option value=""></option>
                    
   <option value="subcat1">sub cat 1</option>
                    
   <option value="subcat2">sub cat 2</option>

   <option value=""></option>
                    
   <option value="subcat4">sub cat 4</option>
                    
   <option value=""></option>
              
</select>

I need to filter items in the tag and remove all duplicate elements in below way

<select id="subCategorySelected">
    
   <option value="Select Sub Category">Select Sub Category</option>
                    
   <option value=""></option>
                    
   <option value="subcat1">sub cat 1</option>
                    
   <option value="subcat2">sub cat 2</option>
                    
   <option value="subcat4">sub cat 4</option>
              
</select>

I have tried in below ways as suggested in some other question but both are not working

1)
var map = {};
$('#subCategorySelected').each(function () {
    if (map[this.value]) {
        $(this).remove()
    }
    map[this.value] = true;
})


2)
$("#subCategorySelected").val(function(idx, val) {
  $(this).siblings('[value="'+ val +'"]').remove();
});

Thanks in advance

Upvotes: 1

Views: 66

Answers (2)

Ruzaik Nazeer
Ruzaik Nazeer

Reputation: 474

Check this out

$(document).ready(function(){
        
   $('#subCategorySelected option').each(function(index,val){
         var value=$(this).val();
         $(this).siblings('[value="'+ value +'"]').remove();
   }); 
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="subCategorySelected">
    
   <option value="Select Sub Category">Select Sub Category</option>
                    
   <option value=""></option>
                    
   <option value="subcat1">sub cat 1</option>
                    
   <option value="subcat2">sub cat 2</option>

   <option value=""></option>
                    
   <option value="subcat4">sub cat 4</option>
                    
   <option value=""></option>
              
</select>

Upvotes: 2

dave
dave

Reputation: 64657

If you know the only duplicates are empty values you could just do:

$("#subCategorySelected option[value='']").slice(1).remove();

otherwise your first method works, just change the selector to:

$("#subCategorySelected option")

Upvotes: 0

Related Questions