Adición optgroups para seleccionar dinámicamente mediante JavaScript

Question

Tengo un cuadro de selección dinámica de población (Ajax) con opciones resultantes por el estilo:

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

... en realidad hay más de ellos, pero no el esencia

Lo que quiero es agrupar cada una de estas dos opciones por grupo opcional usando Javascript (usando Jquery o Mootools quizás) después de cargar la lista, para que antes de cada uno de este grupo - agreguemos una etiqueta de grupo de opciones con esa etiqueta obtenemos de la segunda opción html de la g roup (en realidad la palabra antes del guión):

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

Sin embargo, siempre hay dos destinos en cada grupo.

Por favor, consejo cómo implementar esto Gracias de antemano.

Answer 1

Usted puede hacer esto en su lugar usando 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); 
     } 

    }); 
}); 

Este código itera sobre todas las opciones en la etiqueta de selección y envuelve cada conjunto de dos en un grupo de selección. También se da cuenta de qué etiquetar el grupo de selección como, basado en el texto de las opciones.

Answer 2

Esto no es demasiado complicado, solo necesita moverse un poco por sus opciones. Quítelos del flujo de documentos, agregue un grupo de opciones en el lugar de las dos opciones asociadas y anexe las opciones a ese grupo de opciones.

Suponiendo que las opciones son en realidad secuencial, como en el ejemplo, una posible, una buena implementación DOM scripting de edad es la siguiente:

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