Учебник для кросс-браузерной манипуляции с выбранными элементами

Question

Не могли бы вы указать мне учебные пособия, в которых объясняется, как управлять выпадающими "select" с помощью JavaScript: добавлять / удалять опции, добавлять / удалять оптгруппы, перемещать опции между оптгруппами, переупорядочивать опции и т. Д.

Iнужен этот кросс-браузер на простом JavaScript, нет библиотеки, подобной jQuery.

Редактировать: точнее, вот два примера того, что я пытаюсь выполнить:

• получить всеопции в select (независимо от того, находятся они в optgroup или нет)
• переупорядочить все опции в алфавитном порядке (на основе текста, а не значения)

Answer 1

Не уверен, почему вы не используете какие-либо рамки ... но

var sel = document.getElementById('my_select');

// 'o' is what you can play with
var o = sel.options

// and about sorting
var n = [];
for(var i = 0; i < o.length; i++){
    n.push(o[i]);
}

function getOptionHtml(opt){
    var s = [];
    for(var i = 0; i < opt.length; i++){
        s.push('<option value="', opt[i].value, '">', opt[i].text, '</option>');
    }
    return s.join('\n')   
}

// sorting the list
n.sort(function(a, b){return a.text < b.text? 1: -1})
sel.innerHTML = getOptionHtml(n);

// NOTE: this solution wont take care of your optgroup
// I simply offer my cent here, you need to adjust your idea accordingly

Answer 2

Вы должны посмотреть документацию HTMLSelectElement в MDN.