添加optgroups選擇使用JavaScript動態

Question

我有這樣導致選項動態填充（阿賈克斯）選擇框：

<select id="destination" name="destination"> 
<option value="london-paris">London-Paris</option> 
<option value="paris-london">Paris-London</option> 

<option value="london-newyork">London-New-York</option> 
<option value="newyork-london">New-York-London</option> 

<option value="london-berlin">London-Berlin</option> 
<option value="berlin-london">Berlin-London</option> 

<option value="london-helsinki">London-Helsinki</option> 
<option value="helsinki-london">Helsinki-London</option> 

...其實有更多的人，但不是本質

我想要的是，在加載列表後，使用Javascript（使用Jquery或Mootools，也許）通過optgroup對每個這兩個選項部分進行分組，以便在每個組之前添加一個optgroup標籤，我們從g的第二選項html中獲得羣組（實際上是短劃線之前的詞）：

<select id="destination" name="destination"> 
<optgroup label="Paris"> 
<option value="london-paris">London-Paris</option> 
<option value="paris-london">Paris-London</option> 
</optgroup> 
<optgroup label="New-York"> 
<option value="london-newyork">London-New-York</option> 
<option value="newyork-london">New-York-London</option> 
</optgroup> 
<optgroup label="Berlin"> 
<option value="london-berlin">London-Berlin</option> 
<option value="berlin-london">Berlin-London</option> 
</optgroup> 
<optgroup label="Helsinki"> 
<option value="london-helsinki">London-Helsinki</option> 
<option value="helsinki-london">Helsinki-London</option> 
</optgroup> 
</select> 

雖然，每組中總有兩個目的地。

請指教如何實施這個 在此先感謝。

Answer 1

可以代替使用這樣做的jQuery：

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

    }); 
}); 

此代碼遍歷select標籤中的所有選項，並將每兩個選項包裝在optgroup中。它還根據選項中的文字找出將optgroup標記爲什麼。

Answer 2

這不是太棘手，你只需要移動你的選項。將它們從文檔流程中取出，在兩個相關選項的位置添加一個optgroup，並將選項附加到該optgroup。

假設選項實際上是連續的，因爲在你的榜樣，一個可能的，好老的DOM腳本執行如下：

var destinationSelect = document.getElementById("destination"); 
var options = destinationSelect.getElementsByTagName("option"); 

var optgroups = []; 

while(options.length > 0) { 

    var option1 = options[0]; 
    var option2 = options[1]; 
    var optgroup = document.createElement("optgroup"); 
    var label = option1.innerHTML.replace(/^[^\-]-/, ""); 
    optgroup.setAttribute("label", label); 
    destinationSelect.removeChild(option1); 
    destinationSelect.removeChild(option2); 
    optgroup.appendChild(option1); 
    optgroup.appendChild(option2); 

    optgroups.push(optgroup); 
} 

for(var i = 0; i < optgroups.length; i ++) { 
    destinationSelect.appendChild(optgroups[i]); 
}