ordenar un select alfabeticamente

[Gerifaltus]

que tal otra duda compadres;

tengo otra duda y también lo intente hacer solo que no resulto (cabe aclarar que no soy muy diestro en javascript, por eso vengo a este foro)

mi duda es que teniendo dos select como a continuación se muestra en el codigo sigueinte.

Código HTML:

<script type="text/javascript"> 
function volcarSelects(emisor, receptor){ 
     
    // Accedemos a los 2 selects 
    emisor = document.getElementById(emisor); 
    receptor = document.getElementById(receptor); 
     
    // Obtenemos algunos datos necesarios 
    posicion = receptor.options.length; 
    selecionado = emisor.selectedIndex; 
     
    if(selecionado != -1) { 

        volcado = emisor.options[selecionado]; 
         
        // Volcamos la opcion al select receptor y lo eliminamos del emisor 
        receptor.options[posicion] = new Option(volcado.text, volcado.value); 
        emisor.options[selecionado] = null; 

    } 
     
} 
</script> 



Y aplicado sobre XHTML seria de la siguiente forma:

<select id="primero" style="width: 200px; height: 100px;" name="primero" multiple="multiple">
<option value="1">Noticias</option>
<option value="2">Inmuebles</option>
<option value="3">Herramientas</option>
<option value="4">Correos</option>
<option value="5">Usuarios</option>
<option value="6">Configuración</option>
</select>

<!-- Fijaros que a la funcion le paso el ID del select que envia y el segundo parametro es el ID que recibe -->
<input type="button" value="&rarr;" onclick="volcarSelects('primero', 'segundo');" />

<!-- En este caso quiero poder "quitar" opciones, por lo que invierto el orden de los parametros pasados a la función -->
<input type="button" value="&larr;" onclick="volcarSelects('segundo', 'primero');" />

<select style="width: 200px; height: 100px;" id="segundo" name="segundo" multiple="multiple">
</select>

Espero que os sirva :)

hago una aclaración, el código no lo cree yo, sino que lo encontre en esta web, obviamente tiene sus respectivos créditos su creador.

bien volviendo a lo que estaba, quisiera que cuando se regresará algun valor del segundo select al primer select, este valor no se colocara al final del select, sino que el select de alguna forma se ordenara alfabeticamente y ese valor volviera al lugar en donde esta en el primer select.

espero hacerme entender, por sus aportaciones y sugerencias, muchas gracias.

[derkenuke]

Buf, me ha costado, pero lo he sacado. Para ordenar un array alfabeticamente he hecho lo siguiente:

Código PHP:

  <select id="elSelect" size="6" onclick="alert(this.options[this.selectedIndex].value)"> 
    <option value="1">c</option> 
    <option value="2">d</option> 
    <option value="3">b</option> 
    <option value="4">a</option> 
    <option value="5">g</option> 
    <option value="6">f</option> 
    <option value="7">e</option> 
</select> 
 
<script> 
 
 
items=document.getElementById("elSelect").options;        // los originales 
opciones=new Array();                                    // sera un doble array: con el texto, y con el valor 
//ordenaremos 'opciones', despues sobrescribiremos todas las opciones originales con 'opciones' que ya estaran ordenadas 
//rellenamos 'opciones' 
for(a=0;a<items.length;a++) 
    opciones[a]=new Array( items[a].text, items[a].value); 
opciones.sort();    // ordenamos 'opcines'. Se ordenara alfabeticamente opciones[0], y los cambios seran efectivos tambien para opciones[1] 
for(a=0;a<items.length;a++) {        //sobrescribimos las opciones originales a las ordenadas 
    items[a].text=opciones[a][0]; 
    items[a].value=opciones[a][1]; 
} 
 
 
</script>  
  

Espero que se entienda bien, si no, preguntas.

[Gerifaltus]

mi estimado derkenuke;

ya probe el scriptm, y no funcionó. quiero creer que el onclic debe estar en el primer select (que tiene por nombre "primero", sin comillas) y el script siguiente:

<script>


items=document.getElementById("elSelect").options; // los originales
opciones=new Array(); // sera un doble array: con el texto, y con el valor
//ordenaremos 'opciones', despues sobrescribiremos todas las opciones originales con 'opciones' que ya estaran ordenadas
//rellenamos 'opciones'
for(a=0;a<items.length;a++)
opciones[a]=new Array( items[a].text, items[a].value);
opciones.sort(); // ordenamos 'opcines'. Se ordenara alfabeticamente opciones[0], y los cambios seran efectivos tambien para opciones[1]
for(a=0;a<items.length;a++) { //sobrescribimos las opciones originales a las ordenadas
items[a].text=opciones[a][0];
items[a].value=opciones[a][1];
}


</script>

después de que escribo las etiquetas del select, osea dentro del codigo html.

como te dije, lo probe y solo me aparece un alert con el número del value cuando hago clic sobre el select. pero el detalle es que uni el codigo que deje en el mensaje con el nuevo que colocaste (donde indicas como odenarlo), paso datos del primer select (me aparece el alert) al segundo select y despues cuando lo regreso, él dato no se ordena y se coloca al final del primer select

[derkenuke]

Hombre si, obviamente mi script es unicamente experimental; una prueba de cómo ordenar un select.

Ahora debes unirlos no "a lo bestia", si no utilizando la cabeza.
Yo crearia una funcion de ordenacion, y cada vez que sea pulsado el boton de mover, que se ordene el select destino (receptor). El codigo completo de la aplicacion seria este:

Código PHP:

   
<script type="text/javascript">  
 
function ordenarSelect(elSelect) { 
    items=document.getElementById(elSelect).options;        // los originales  
    opciones=new Array();                                    // sera un doble array: con el texto, y con el valor  
    //ordenaremos 'opciones', despues sobrescribiremos todas las opciones originales con 'opciones' que ya estaran ordenadas  
    //rellenamos 'opciones'  
    for(a=0;a<items.length;a++)  
        opciones[a]=new Array( items[a].text, items[a].value);  
    opciones.sort();    // ordenamos 'opciones'. Se ordenara alfabeticamente opciones[0], y los cambios seran efectivos tambien para opciones[1]  
    for(a=0;a<items.length;a++) {        //sobrescribimos las opciones originales a las ordenadas  
        items[a].text=opciones[a][0];  
        items[a].value=opciones[a][1];  
    } 
} 
 
function volcarSelects(emisor, receptor){  
      
    // Accedemos a los 2 selects  
    emisor = document.getElementById(emisor);  
    receptor = document.getElementById(receptor);  
      
    // Obtenemos algunos datos necesarios  
    posicion = receptor.options.length;  
    selecionado = emisor.selectedIndex;  
      
    if(selecionado != -1) {  
 
        volcado = emisor.options[selecionado];  
          
        // Volcamos la opcion al select receptor y lo eliminamos del emisor  
        receptor.options[posicion] = new Option(volcado.text, volcado.value);  
        emisor.options[selecionado] = null;  
 
    }  
     
    ordenarSelect(receptor.id); 
 
}  
</script>  
 
 
 
<select id="primero" style="width: 200px; height: 100px;" name="primero" multiple="multiple"> 
<option value="1">Noticias</option> 
<option value="2">Inmuebles</option> 
<option value="3">Herramientas</option> 
<option value="4">Correos</option> 
<option value="5">Usuarios</option> 
<option value="6">Configuración</option> 
</select> 
 
<!-- Fijaros que a la funcion le paso el ID del select que envia y el segundo parametro es el ID que recibe --> 
<input type="button" value="&rarr;" onclick="volcarSelects('primero', 'segundo');" /> 
 
<!-- En este caso quiero poder "quitar" opciones, por lo que invierto el orden de los parametros pasados a la función --> 
<input type="button" value="&larr;" onclick="volcarSelects('segundo', 'primero');" /> 
 
<select style="width: 200px; height: 100px;" id="segundo" name="segundo" multiple="multiple"> 
</select>  
  

Creo que es lo que buscas, si no siempre se puede retocar

[Gerifaltus]

ok, derkenuke.

si funciona y muy bien, es justo lo que necesito. gracias compadre

ha, y si, me falto pensar un poco más (y con la cabeza, que ultimamente no se donde anda.), gracias y hasta pronto espero volver con alguna otra duda

[derkenuke]

Me alegro de que te haya servido

[JAIMECANO]

Hola, he leido el post y me ha ayudado los suficiente, lo unico que me pasa ahora es que tengo que darle dos veces al select para que se abra, creo que es debido a un onChange que tengo


function fncActualizar(){
var f = document.forms['fomulario'];
var empresa1 = document.getElementById("empresa").value;
window.location.href="Index.php?dato="+empresa1;
};

function ordena(){
items=document.getElementById("empresa").options;
opciones=new Array();
for(a=0;a<items.length;a++)
opciones[a]=new Array( items[a].text, items[a].value);
opciones.sort();
for(a=0;a<items.length;a++) { //sobrescribimos las opciones originales a las ordenadas
items[a].text=opciones[a][0];
items[a].value=opciones[a][1];
}
};


Y este es el select <select name="empresa" id="empresa" onClick = "ordena()" onchange="fncActualizar()">

¿Cual puede ser el problema? Se ejecuta antes el actualizar y luego ordena, no?

[jailton]

Hola: De antemano agradezco la ayuda encontrada en el foro. el script de los select me sirvió muchísimo. pero con tu ejemplo solo se puede pasar una opción al tiempo, lo modifiqúé y asi puedo pasar más de una al tiempo.

Aquí está mi respuesta.

function volcarSelects(autores, autordestino){

// Accedemos a los 2 selects
emisor = document.getElementById(autores);
receptor = document.getElementById(autordestino);
// Obtenemos algunos datos necesarios

var i=0,c=0;
c=emisor.length;
while(i<c){
posicion = receptor.options.length;
seleccionado = emisor.selectedIndex;
if(seleccionado != -1) {
volcado = emisor.options[seleccionado];
// Volcamos la opcion al select receptor y lo eliminamos del emisor
receptor.options[posicion] = new Option(volcado.text, volcado.value);
emisor.options[seleccionado] = null;


}
i++;
}
}


Modificación hecha por Jailton Yanes, idea originalmente tomada de Foros del web