将 optgroup 动态添加到现有选择

Question

我有一个现有的选择，其中包含 5 个选项和一个默认的空白值。我想将一个 optgroup 添加到前 3 个值，并将另一个 optgroup 添加到最后两个选项。

<select id="cityDropdown">
    <option selected="selected" value="" label=" "> </option>
    <option value="1000">Tokyo</option>
    <option value="1001">Kyoto</option>
    <option value="1002">Osaka</option>
    <option value="1003">Incheon</option>
    <option value="1004">Busan</option>
</select>

我希望我的选择看起来像这样

<select id="cityDropdown">
    <optgroup label="Japan">
        <option value="1000">Tokyo</option>
        <option value="1001">Kyoto</option>
        <option value="1002">Osaka</option>
    </optgroup>
    <optgroup label="SoKorea">
        <option value="1003">Incheon</option>
        <option value="1004">Busan</option>
    </optgroup>
</select>

下面是我现有的代码，它不再有效，因为值不再均匀。

$(document).ready(function() {
    var select = $('#cityDropdown');
    var opt1, opt2;
    $('option', select).each(function(i) {
        if (i % 2 === 0) {
            opt1 = $(this);
        } else {
            opt2 = $(this);
            var optgroup = $('<optgroup/>');
            optgroup.attr('label', label);
            opt2.add(opt1).wrapAll(optgroup);
        }

    });
});