Javascript jQuery-在页面加载时，通过父选择中的默认选择选项，在第二个选择中选择optgroup和children

我有一个select“usercountry”，当页面加载时，它有一个预定义的选项。我有第二个选择，用optgroup country和child选项state组织。我有一个jQuery脚本，当选择usercountry时，它将相应地更改/显示optgroup和child选项状态。问题是当页面加载时预选了“United States”，我需要预先加载optgroup United States

HTML:

非常感谢您的帮助

编辑：以下是安娜贝尔建议的摘要

---

编辑：感谢Annabel，上面的代码可以正常工作，请参见上面的EJSFIDLE以获取最终版本

您是否将代码放入了$（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在这里放置大量代码是正常的。

在更改用户国家/地区选择时，在第二个选择中选择了相应的optgroup，它就工作了。问题在于，当页面第一次加载父选择时，默认选择的选项是美国，而第二次选择为空。我希望这是有道理的。我只需要第二个select，就可以在页面加载时加载与父select的预选选项匹配的optgroup。嗨，Annabel，不，我不会在页面加载时预加载“美国”optgroup。用户状态选择为空。我想你的代码中也有一个输入错误。应该是$（'#usercountry'）.change（setOptGroup）；而不是$（“#usercountry”）.change（setOptionGroup）；我改了，但还是没用。我没看到打字错误。第一个选择有一个用于美国的选项，第二个选择有一个用于美国的optgroup。您看过JSFIDLE了吗？是的，看看HTML窗格中的第5行。您已经有两次“Sates”。这与您在原始问题中粘贴的代码的第5行相同。我进行了适当的编辑并更新了JSFIDLE，但这仍然不起作用。有什么建议吗？

// 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
});

// 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
});