jQuery set selected value in option box once the box has been loaded
- by Maarten
I want to preset the value of a selectbox based on a hidden field. I need this after an error has been detected in a form to avoid the user having to set the value themselves again.
I do this by setting the value of a hidden field server side.
The problem I have seems to be that the select box isn't done yet at the time I try to set the selected value.
Anyone know how to solve this (possibly in a very different way?)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
// this functions loads the state select box with states if a country with states is selected
$("select#countries").change(function(){
$.getJSON("/ajax/exhibition/getstates.php?idCountry="+$("select#countries").val(), function(j){
var options = '';
$.each(j, function(key, value){
options += '<option value="' + key + '">' + value + '</option>';
});
$("select#state").html(options);
});
});
});
$(document).ready(function(){
// preset the state select box on page ready
$('select#countries').change();
// set the selected value of the state select box
var foo = $('#statepreset').val();
$("select#state option[value="+foo+"]").attr('selected', 'selected');
});
</script>
