CODEWITHSUNDEEP
jquery
This and that
This and that

Reputation: 77

Changing dropdown selected text with jQuery

So, i have a dropdown (on Bigcommerce site) with preselected value of "Please Choose an Option" that is used for size selection:

<select name="attribute[95]">
        <option value="" selected="selected">Please Choose an Option</option>

                    <option value="73">Small</option>
                    <option value="74">Medium</option>
                    <option value="75">Large</option>
            </select>

I am trying to change it with jQuery so instead of "Please Choose an Option" it says "Choose an option". So far i have this snippet:

 <script>
            $(document).ready(function(){
                $('select option:contains(\'-- Please Choose an Option --\')').text("Choose an Option")
            })
            </script>

Which does the trick but only after the user clicks on the dropdown, aka, when the page loads, old text appears and new one is shown only if the person clicks on the dropdown...

Any suggestions on what is wrong?

Upvotes: 0

Views: 1567

Answers (1)

jlocker
jlocker

Reputation: 1488

You can try out the below,

Select the first option using first-child

$(document).ready(function(e) {
 $('select option:first-child').text("Choose an Option");   
});

Or

$(document).ready(function (e) {
    $('select option').each(function () {
        if ($(this).text() == 'Please Choose an Option') {
            $(this).text('Choose an Option');
        }
    });
});

Upvotes: 1

Related Questions