Ajout optgroups pour sélectionner dynamiquement en utilisant javascript

Question

J'ai une dynamique de population (par ajax) avec des options boîte de sélection résultant comme ça:

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

... il y a en fait plus d'entre eux, mais pas la La chose que je veux est de grouper chacune de ces deux portions d'option par optgroup en utilisant Javascript (en utilisant Jquery ou Mootools peut-être) après le chargement de la liste, de sorte qu'avant chaque groupe - on ajoute une étiquette optgroup avec étiquette nous obtenons de la deuxième option html de la g roup (en fait le mot avant dash):

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

Cependant, il y a toujours deux destinations dans chaque groupe.

S'il vous plaît, des conseils comment mettre en œuvre ce Merci d'avance.

Answer 1

Vous pouvez le faire en place en utilisant 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); 
     } 

    }); 
}); 

Ce code parcourt toutes les options de la balise select et encapsule chaque jeu de deux dans un optgroup. Il détermine également ce que l'étiquette d'optgroup doit être, en fonction du texte dans les options.

Answer 2

Ce n'est pas trop compliqué, il vous suffit de déplacer un peu vos options. Retirez-les du flux de documents, ajoutez un optgroup à la place des deux options associées et ajoutez les options à ce groupe d'opt.

En supposant que les options sont en fait séquentielle, comme dans votre exemple, une possible bonne vieille mise en œuvre de scripts DOM est la suivante:

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