javascript - 选择元素的跨浏览器操作教程

Question

您能否向我指出一些教程，这些教程解释了如何使用 JavaScript 操作“选择”下拉菜单：添加/删除选项、添加/删除选项组、在选项组之间移动选项、重新排序选项等。

我需要这个纯 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

您应该查看 MDN 上的HTMLSelectElement 文档。