change text at select option value=“”

Question

this is my code of a dynamic drop down menu and I want to change the text of the first option which has no id and the value is empty!

this is the code:

<div class="my-tours">
    <select name="tours">
        <option value="">All</option>
        <option value="america">America</option>
    </select>
</div>

Answer 1

Your question is not clear what you want as output. but you change first option value by doing something like this :

$("#select-id option:first").attr("value", "");

Answer 2

 $('#tours > option:not([id])').filter(function () { let val = $(this).attr('value'); return val === undefined || val === ''; }).first().text('First id-less with no value'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="my-tours"> <select name="tours" id="tours"> <option value="mexico">Mexico</option> <option value="">All</option> <option value="america">America</option> <option>Nowhere</option> </select> </div> 

I added an id to the <select> tag to make it simpler to select it, and make DOM queries for it more efficient. I highly recommend doing that, but if for some reason you can't add an id, you could also select it using $('select[name="tours"]') .

Step by step, here is what this does:

• $('#tours > option:not([id])') selects all of the <option> tags inside of #tours that do not have an id attribute.
• The filter function filters out any options that have a value attribute that is not empty. I had to use a function to account for both options with no value attribute at all and ones that have an empty value attribute. If you can be guaranteed that all of the options will have a value attribute, you could use a selector .filter('[value=""]') instead.
• .first() grabs the first option that matched our filter.
• .text() sets the new text.

Answer 3

Here it is. Use name attribute and :first in option selector.

 $(document).ready(function() { $("select[name='tours'] option:first").text("wow"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="my-tours"> <select name="tours"> <option value="">All</option> <option value="america">America</option> </select> </div>