選擇元素的跨瀏覽器操作教程

您可以向我指出解釋如何操作JavaScript的「選擇」下拉菜單的教程：添加/刪除選項，添加/刪除optgroups，在optgroups之間移動選項，重新排序選項，等選擇元素的跨瀏覽器操作教程

我需要這個跨瀏覽器在普通的JavaScript，沒有像jQuery的庫。

編輯：更具體的，這裏是我所要完成的兩個例子：

得到內選擇所有選項（無論他們是在OPTGROUP與否）
重新排序的所有選項的字母順序（基於文本，不是值）

來源

2011-06-16 Christophe

你應該看看MDN上的HTMLSelectElement documentation。

來源

2011-06-16 02:01:01 alex

謝謝，但頁面上的唯一操作是一個基本的添加方法。我正在尋找更高級的教程。我在我的問題中添加了一些示例。 – Christophe 2011-06-16 02:14:08

不知道爲什麼你不使用任何框架......但

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

來源

2011-06-16 02:42:38

我正在使用框架，我只需要跨框架工作的東西，而不是特定的框架。我很欣賞排序的例子，但我在尋找的不僅僅是基礎知識，optgroups是我的一個難點（參考我的問題）。 – Christophe 2011-06-16 04:50:13

選擇元素的跨瀏覽器操作教程

回答

相關問題