jQuery set selected value in option box once the box has been loaded

Posted by Maarten on Stack Overflow See other posts from Stack Overflow or by Maarten
Published on 2010-03-18T09:20:30Z Indexed on 2010/03/18 9:31 UTC
Read the original article Hit count: 413

Filed under:

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>

© Stack Overflow or respective owner

Related posts about jQuery