jQuery - 在页面加载时选择 optgoup 并在第二个中选择子项，通过父项选择中的默认选择选项

Question

我有一个选择“usercountry”，在页面加载时选择了一个预定义选项。我有第二个选择，其中包含 optgroup 国家和子选项状态。 I have a jQuery script that will change/show the optgroup and child option states accordingly when the usercountry is chosen.问题是当页面加载预选“美国”时，我需要预加载 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
});

非常感谢任何帮助！

编辑：这是 Annabel 建议的 jsFiddle http://jsfiddle.net/goodegg/phj8q/ 编辑：上面的代码感谢 Annabel，请参阅上面的 ejsFiddle 了解最终版本

Answer 1

您是否将代码放入$(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在这里放很多代码是正常的。