CODEWITHSUNDEEP
jqueryselectdrop-down-menu
Himani
Himani

Reputation: 173

Change the dropdown option text with no value on page load

I am trying to override the text of one of the Dropdown option using jQuery but it's not working.

I want to display the option text All Categories instead of Categories

HTML Snippet

<select name="filter-cat">
<option value="">Categories</option>
<option value="abc">ABC</option>
</select>

Js Code:

jQuery ('[name=filter-cat] option').filter(function() { 
return ($(this).text() == 'Categories'); //To select Blue
}).prop('text', "All Categories");

Please, can anyone help me with this?

Thanks in advance!

Upvotes: 0

Views: 330

Answers (4)

Zorken17
Zorken17

Reputation: 1896

This is also a way you could do it:

First find the select-element by filtering on name, then look at the option element that contains the text Categories, and lastly change the text to All Categories

$(function() {
  $('select[name=filter-cat] option:contains("Categories")').text('All Categories');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="filter-cat">
  <option value="">Categories</option>
  <option value="abc">ABC</option>
</select>

Upvotes: 1

Kiranramchandran
Kiranramchandran

Reputation: 2094

try this

$('select[name=filter-cat]').find('option[value=""]').text('All Categories');

DEMO HERE

hope this helps.

Upvotes: 1

Sonia
Sonia

Reputation: 1919

Text can be changed with below function as

CODEPEN LINK

   $(document).ready(function () {
$('select option:contains("Categories")').each(function(){
   var $this = $(this);

   $this.text($this.text().replace("Categories","All Categories"));    
});
  });

Upvotes: 1

Mohammad Azhdari
Mohammad Azhdari

Reputation: 602

Try this:

$('[name=filter-cat] option').filter(function(el) {
     return $(el).text() === 'Categories';
}).text('All Categories');

Upvotes: 0

Related Questions