catap's blog ~ записки ёmacs'ера

Пришлось столкнуться с генерацией select’ов с optgroup, да так, что бы это было переносимо (opera, ie, ff).

Первое что приходит в голову, это следующий код:

function sampleAddItemsAtSelect(selectObject){
    var optgroup = document.createElement("optgroup");
    optgroup.label = "1 optgroup";
    optgroup.appendChild(new Option("item 1"));
    optgroup.appendChild(new Option("item 2"));
    selectObject.appendChild(optgroup);

    optgroup = document.createElement("optgroup");
    optgroup.label = "2 optgroup";
    optgroup.appendChild(new Option("item 3"));
    optgroup.appendChild(new Option("item 4"));
    selectObject.appendChild(optgroup);
}

Но у него есть проблема — в IE «мои items» не рендерется (нету текста, хотя выбрать их можно). Пришлось искать обходные пути, и они были найдены.

function sampleAddItemsAtSelect(selectObject){
    var optgroup = document.createElement("optgroup");
    optgroup.label = "1 optgroup";
    selectObject.appendChild(optgroup);
    selectObject.options[selectObject.options.length] = new Option("item 1")
    selectObject.options[selectObject.options.length] = new Option("item 2")

    optgroup = document.createElement("optgroup");
    optgroup.label = "2 optgroup";
    selectObject.appendChild(optgroup);
    selectObject.options[selectObject.options.length] = new Option("item 3")
    selectObject.options[selectObject.options.length] = new Option("item 4")
}

Причина такого поведения мне остается загадкой, а так же ответ на вопрос: «Как заполнить в select optgroup не по порядку?»