javascript - Remove duplicate empty values from select tag

Question

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

Answer 1

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