Search jQuery

jQuery Forum

Developing jQuery Mobile

shimix

auto select an option

in Developing jQuery Mobile • 10 years ago

Hi,

I have a select menu similar to this one (populated dynamically):

<option value="NAN">SELECT COUNTRY</option>

<option value="AF">Afghanistan</option>

<option value="AL">Albania</option>

<option value="DZ">Algeria</option>

<option value="AS">American Samoa</option>

<option value="AD">Andorra</option>

<option value="AO">Angola</option>

<option value="AI">Anguilla</option>

<option value="AQ">Antarctica</option>

<option value="AG">Antigua And Barbuda</option>

<option value="AR">Argentina</option>

<option value="AM">Armenia</option>

</select>

I manage to select the desired option before the page is displayed, with:

$("#country option[value='Angola']").attr('selected','selected');

But the displayed option (when the menu is closed) is always the first one - 'SELECT COUNTRY'.

Any ideas? Am I missing something?

Thanks,

Shimi

Replies(9)

wick

Re: auto select an option

10 years ago

Sure -- the option value you set 'selected' on should be "AO", not "Angola".

("Angola" is the .text property of the option element, not the value)

-Wick
CarComplaints.com

wick

And technically with jQuery 1.6.1 & later, it's slightly better to use:

$("#country option[value='AO']").prop('selected',true);

See the release notes about prop() vs attr()

Since you are setting the boolean property with javascript, you just set true/false & don't need to set 'selected' as the value... That's for setting the default option state using HTML.

-Wick
CarComplaints.com

shimix

Re: auto select an option

10 years ago

Thanks Wick!

The first issue, is just a typo... :)

I tried your second suggestion, and used $("#country option[value='AO']").prop('selected',true) but with no success.

When I display the standard select menu (data-role="none"), I do see the right country selected (Angola). But when I switch to the jquery mobile customized select menu, I still see "SELECT COUNTRY".

Any other idea? I'm completely stuck here...

Thanks,

Shimi

jakecigar

Re: Re: auto select an option

10 years ago

try

$('#country').val(“AO”).trigger(‘change’)

the val is old school, and the trigger is for jQuery mobile.

shimix

Re: auto select an option

10 years ago

Great!

It worked!

toddparker

Re: auto select an option

10 years ago

You can also call the refresh method after to adjust the selected option to update the custom control to match the new state of the native select.

..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.

todd@filamentgroup.com

kersenon

Re: auto select an option

9 years ago

Hi.. a little late but this $("#country option[value='AO']").prop('selected',true) wasn't working because the "option" tag is a child of select#country, so you should use ">" like this:
$("#country > option[value='AO']").prop('selected',true)

or

$("#country").children("option[value='AO']").prop('selected',true)

Hope it helps someone.