jQuery - remove select option based on text not value

odd_duck picture odd_duck · Jul 9, 2014 · Viewed 24.3k times · Source

I have a dropdown box as follows:

<select id="select_Boiler">
  <option value="boiler_1645">Vaillant 831</option>
  <option value="boiler_2373">Worcester 24</option>
  <option value="boiler_3009">Vaillant 835</option>
  <option value="boiler_4354">Bosch 671</option>
</select>

I need to be able remove specific options using jQuery but based on the text not the option value. I've tried this without success:

jQuery("#select_Boiler option[text='Vaillant 835']").remove();

I know I can do the same with value as below and it works but i need to do it by text

jQuery("#select_Boiler option[value='boiler_3009']").remove();

Answer

Arun P Johny picture Arun P Johny · Jul 9, 2014

you can use :contains to filter based on text content of an element, but note that it will return partial matches. So :contains('Vaillant 835') will return :contains('Vaillant 835') and :contains('Vaillant 8356')

jQuery("#select_Boiler option:contains('Vaillant 835')").remove();

If you want to filter for equal you need to do a manual filter like

jQuery("#select_Boiler option").filter(function(){
    return $.trim($(this).text()) ==  'Vaillant 835'
}).remove();