jQuery: Set the default selected OPTION of a HTML SELECT list

Posted Wednesday 2nd December 2009

Setting the default selected option dynamically with PHP was going to take too long so I decided to use jQuery instead. After some playing around it was an easy operation.

Setting the default selected option in jQuery is simple. Take, for example the select list below:

<select class="country_list" name="country_selected">
                    <option value="GB" class="gb">United Kingdom</option>
                    <option value="IN" class="in">International</option>
                    <option value="AU" class="au">Australia</option>
                    <option value="AT" class="at">Austria</option>
                    <option value="BE" class="be">Belgium</option>
                    <option value="BR" class="br">Brazil</option>
</select>

To set the country you reference the select list (named country_selected above) and set the value, it’s as easy as that.

1	$('select[name=country_selected]').val('IN');

As I was using PHP it was a simple case of printing the PHP to the script.

1	<script type="text/javascript">$('select[name=country_selected]').val('<?php echo $project_region; ?>');</script>

Bookmark or share this page:

HTML Country List for Select Drop Down

MSN Contact: contact [at] danielgibbs.net

Posted in Javascript, JQuery | 2 Comments »

2 Comments

Jay Malik 17 January 2010 2:04 pm

Hmm. Tried this and did not work, so I suspect I need to know where to place the new line.

Have tried below and above. Any suggestions (email me at jay@centerlinesft.com). Thanks.

$(‘select[name=Type]‘).val(”);

Prospect
Customer
Pending Partner
Partner Staff
Partner Executive
Distributor
Reserved
Centerline Staff
Centerline Admin
Gibbs 17 January 2010 3:34 pm

Hey Jay,

I sent you an e-mail. I’ll go over this later and double check it works. If it does I’ll try and make this clearer.

Cheers