Question

我有一个选择“usercountry”，它在页面加载时选择了预定义选项。我有第二个选择组织有optgroup国家和子选项状态。我有一个jQuery脚本，当选择usercountry时，它将相应地更改/显示optgroup和子选项状态。问题是当页面加载“美国”预选时我需要预装了美国的optgroup。

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

非常感谢任何帮助！

编辑：这是安娜贝尔建议的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在这里放置大量代码是很正常的。

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

1 个答案: