llamar - Agregar grupos optg para seleccionar usando javascript dinámicamente

llamar funcion javascript html sin evento

Question

Tengo un recuadro de selección dinámicamente poblado (por ajax) con las opciones resultantes así:

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

Lo que quiero es agrupar cada una de estas dos partes opcionales mediante el uso de Javascript (usando Jquery o Mootools quizás) después de cargar la lista, de modo que antes de cada uno de este grupo, agreguemos una etiqueta de grupo de opciones con la etiqueta que obtenemos de la segunda opción html del grupo (en realidad la palabra antes del guion):

<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, consejos sobre cómo implementar esto Gracias de antemano.

Answer 1

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

Asumiendo que las opciones son realmente secuenciales, como en su ejemplo, una posible y buena implementación de secuencias de comandos DOM 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]);
}