How to run a function after component loaded at JQuery?

      <select id="townid" name="townid">
         <s:iterator value="townsForLanding">
            <option value="<s:property value="id"/>"><s:property value="name"/></option>
         </s:iterator>
      </select>

I have a function like this:

  $(function(){
     var central = $('#townid option:contains("Central")');
     if(central){
        central.insertAfter('select option:first-child');
     }
  });

This function does that: If that dropdwonlist has an element of "Central" puts it after the first option.

My problem is that h开发者_开发知识库ow can I run that function after that drowdownlist has loaded.

I tried:

  $('#townid').one("click", function() {
    $('#townid option:contains("Central")').insertAfter('select option:first-child');
  });

However that code has a problem: The list comes Central is not correct place and after that it comes to second place, I mean it doesn't refresh it quickly so I see the change of list. I want it before clicking after load?

try putting your code inside

$(document).ready(function(){

// call you function here


});