Check if option is selected with jQuery, if not select a default

No need to use jQuery for this:

var foo = document.getElementById('yourSelect'); if (foo) { if (foo.selectedIndex != null) { foo.selectedIndex = 0; } } 

This question is old and has a lot of views, so I'll just throw some stuff out there that will help some people I'm sure.

To check if a select element has any selected items:

if ($('#mySelect option:selected').length > 0) { alert('has a selected item'); } 

or to check if a select has nothing selected:

if ($('#mySelect option:selected').length == 0) { alert('nothing selected'); } 

or if you're in a loop of some sort and want to check if the current element is selected:

$('#mySelect option').each(function() { if ($(this).is(':selected')) { .. } }); 

to check if an element is not selected while in a loop:

$('#mySelect option').each(function() { if ($(this).not(':selected')) { .. } }); 

These are some of the ways to do this. jQuery has many different ways of accomplishing the same thing, so you usually just choose which one appears to be the most efficient.

lencioni's answer is what I'd recommend. You can change the selector for the option ('#mySelect option:last') to select the option with a specific value using "#mySelect option[value='yourDefaultValue']". More on selectors.

If you're working extensively with select lists on the client check out this plugin: http://www.texotela.co.uk/code/jquery/select/. Take a look the source if you want to see some more examples of working with select lists.

Here is my function changing the selected option. It works for jQuery 1.3.2

function selectOption(select_id, option_val) { $('#'+select_id+' option:selected').removeAttr('selected'); $('#'+select_id+' option[value='+option_val+']').attr('selected','selected'); } 

<script type="text/javascript"> $(document).ready(function() { if (!$("#mySelect option:selected").length) $("#mySelect").val( 3 ); }); </script> 

Easy! The default should be the first option. Done! That would lead you to unobtrusive JavaScript, because JavaScript isn't needed :)

Unobtrusive JavaScript

I already came across the texotela plugin mentioned, which let me solve it like this:

$(document).ready(function(){ if ( $("#context").selectedValues() == false) { $("#context").selectOptions("71"); } }); 

Look at the selectedIndex of the select element. BTW, that's a plain ol' DOM thing, not JQuery-specific.

This was a quick script I found that worked... .Result is assigned to a label.

$(".Result").html($("option:selected").text()); 

I found a good way to check, if option is selected and select a default when it isn't.

 if(!$('#some_select option[selected="selected"]').val()) { //here code if it HAS NOT selected value //for exaple adding the first value as "placeholder" $('#some_select option:first-child').before('<option disabled selected>Wybierz:</option>'); } 

If #some_select has't default selected option then .val() is undefined

You guys are doing way too much for selecting. Just select by value:

$("#mySelect").val( 3 ); 

if (!$("#select").find("option:selected").length){ // } 

$("option[value*='2']").attr('selected', 'selected'); // 2 for example, add * for every option 

$("#select_box_id").children()[1].selected 

This is another way of checking an option is selected or not in jquery. This will return Boolean (True or False).

[1] is index of select box option

Change event on the select box to fire and once it does then just pull the id attribute of the selected option :-

$("#type").change(function(){ var id = $(this).find("option:selected").attr("id"); switch (id){ case "trade_buy_max": // do something here break; } }); 

I was just looking for something similar and found this:

$('.mySelect:not(:has(option[selected])) option[value="2"]').attr('selected', true); 

This finds all select menus in the class that don't already have an option selected, and selects the default option ("2" in this case).

I tried using :selected instead of [selected], but that didn't work because something is always selected, even if nothing has the attribute

If you need to explicitly check each option to see if any have the "selected" attribute you can do this. Otherwise using option:selected you'll get the value for the first default option.

var viewport_selected = false; $('#viewport option').each(function() { if ($(this).attr("selected") == "selected") { viewport_selected = true; } });