javascript - jQuery - on page load select optgoup and children in second select by a default selected option in a parent select -

i have select "usercountry" has predefined option selected when page loads. have second select organized optgroup country , child option state. have jquery script change/show optgroup , child option states accordingly when usercountry chosen. problem when page loads "united states" preselected need optgroup united states preloaded.

html:

<select name="usercountry" id="usercountry" class="required">         <option value="">-- please choose --</option>         <option value="13">australia</option>         <option value="38">canada</option>         <option value="223" selected>united states</option>         <option value="239">zimbabwe</option> </select> <select name="userstate" id="userstate" class="required">              <option value="" selected>please choose..</option>        <optgroup label="australia">              <option value="new south wales">new south wales</option>              <option value="northern territory">northern territory</option>              <option value="queensland">queensland</option>        </optgroup>        <optgroup label="canada">              <option value="alberta">alberta</option>              <option value="british columbia">british columbia</option>              <option value="manitoba">manitoba</option>              <option value="new brunswick">new brunswick</option>        </optgroup>        <optgroup label="united states">              <option value="alabama">alabama</option>              <option value="alaska">alaska</option>              <option value="arizona">arizona</option>              <option value="arkansas">arkansas</option>              <option value="california">california</option>              <option value="colorado">colorado</option>              <option value="connecticut">connecticut</option>        </optgroup>        <optgroup label="zimbabwe">              <option value="bulawayo">bulawayo</option>              <option value="harare">harare</option>              <option value="manicaland">manicaland</option>              <option value="midlands">midlands</option>        </optgroup> </select> 

jquery:

// sets option group using same code use on-country-change     function setoptgroup() { var state_province = $('#userstate option, #userstate optgroup');     state_province.hide(); // edit: line won't retrieve selected country when page has been loaded //$("#userstate optgroup[label='" + $(this).find(':selected').html() + "']") // line works     $("#userstate optgroup[label='" + $('#usercountry option:selected').text() + "']")         .children()         .andself()         .show(); }  $( document ).ready(function() {     // set usa option group when page loaded     setoptgroup();  // present code - refactored bit $('#usercountry').change(setoptgroup); // edit fix typo }); 

any appreciated!

edit: here jsfiddle of annabel's suggestion http://jsfiddle.net/goodegg/phj8q/ edit: code above works annabel, see ejsfiddle above final version

have put code in $(document).ready() function?

assuming code want when user selects different country, want change code to:

// sets option group using same code use on-country-change function setoptgroup() {     var state_province = $('#userstate option, #userstate optgroup');     state_province.hide();     // edit: line won't retrieve selected country when page has been loaded     //$("#userstate optgroup[label='" + $(this).find(':selected').html() + "']")     // line works     $("#userstate optgroup[label='" + $('#usercountry').val() + "']")         .children()         .andself()         .show(); }  $( document ).ready(function() {     // set usa option group when page loaded     setoptgroup();      // present code - refactored bit     $('#usercountry').change(setoptgroup); // edit fix typo }); 

the document.ready function run once - when page has finished loading. it's normal jquery put lot of code here.