Dodawanie optgroups wybrać przy użyciu JavaScript dynamicznie

Question

Mam dynamicznie zaludnionych (AJAX) wybierz okno z opcjami wynikającymi tak:

<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> 

... nie są w rzeczywistości bardziej z nich, ale nie esencja

Chodzi o to, aby pogrupować każdą z tych dwóch opcji przez grupę optyczną za pomocą Javascript (przy użyciu Jquery lub Mootools) po załadowaniu listy, tak aby przed każdą z tej grupy dodaliśmy tag optgroup z etykietą otrzymujemy od drugiej opcji html g roup (faktycznie słowo przed deską rozdzielczą):

<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> 

Mimo to zawsze są dwa miejsca docelowe w każdej grupie.

Proszę doradzić, jak zaimplementować to Z góry dziękuję.

Answer 1

Można to zrobić na miejscu przy użyciu 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); 
     } 

    }); 
}); 

Ten kod iteruje wszystkie opcje w znaczniku select i opakowuje każdy zestaw dwóch w grupę optyczną. Dowiesz się również, co oznaczać optgroup jako na podstawie tekstu w opcjach.

Answer 2

To nie jest zbyt trudne, wystarczy tylko trochę zmienić opcje. Usuń je z obiegu dokumentów, dodaj grupę optyczną zamiast dwóch powiązanych opcji i dołącz opcje do tej grupy optycznej.

Zakładając, że opcje są rzeczywiście sekwencyjny, jak w przykładzie, to możliwe, stara dobra implementacja DOM skryptowy jest w następujący sposób:

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]); 
}