jQuery - на странице load select optgoup и children во втором выборе по умолчанию выбранный вариант в родительском элементе

Question

У меня есть опция «usercountry», которая имеет предопределенную опцию, выбранную при загрузке страницы. У меня есть второй выбор, организованный с использованием состояния страны и дочерней страны optgroup. У меня есть сценарий jQuery, который изменит/покажет опцию optgroup и child option соответственно при выборе usercountry. Проблема заключается в том, когда страница загружается с выбранными «Соединенными Штатами». Мне нужна предварительная загрузка optgroup United States.

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 the option group using the same code you already use for on-country-change 
    function setOptGroup() { 
var state_province = $('#userstate option, #userstate optgroup'); 
    state_province.hide(); 
// EDIT: this line won't retrieve selected country when page has just been loaded 
//$("#userstate optgroup[label='" + $(this).find(':selected').html() + "']") 
// this line works 
    $("#userstate optgroup[label='" + $('#usercountry option:selected').text() + "']") 
     .children() 
     .andSelf() 
     .show(); 
} 

$(document).ready(function() { 
    // set up the USA option group when the page is loaded 
    setOptGroup(); 

// your present code - refactored a bit 
$('#usercountry').change(setOptGroup); // edit to fix typo 
}); 

Любая помощь очень ценится!

EDIT: Вот jsFiddle внушения Аннабель http://jsfiddle.net/goodegg/phj8q/ EDIT: Код выше работает благодаря Аннабель см ejsFiddle выше для окончательной версии

Answer 1

Have вы положили свой код в $(document).ready() функции?

Предположим, что ваш код делает то, что вы хотите, когда пользователь выберет другую страну, это то, что вы хотите изменить свой код:

// sets the option group using the same code you already use for on-country-change 
function setOptGroup() { 
    var state_province = $('#userstate option, #userstate optgroup'); 
    state_province.hide(); 
    // EDIT: this line won't retrieve selected country when page has just been loaded 
    //$("#userstate optgroup[label='" + $(this).find(':selected').html() + "']") 
    // this line works 
    $("#userstate optgroup[label='" + $('#usercountry').val() + "']") 
     .children() 
     .andSelf() 
     .show(); 
} 

$(document).ready(function() { 
    // set up the USA option group when the page is loaded 
    setOptGroup(); 

    // your present code - refactored a bit 
    $('#usercountry').change(setOptGroup); // edit to fix typo 
}); 

document.ready функция будет выполняться один раз - когда страница готовая загрузка. Это нормально, когда jQuery содержит много кода здесь.