Al ser código que se encuentra en el lado del cliente (pues ya fue procesado en el servidor y es solo la respuesta del mismo), deberías de hacerlo con un lenguaje del lado del cliente, como JavaScript que posee el método
.sort()
para ordenar arrays.
Al momento de seleccionar una de las opciones para realizar el ordenamiento, podrías tomar los valores de las opciones de la lista, agruparlos en un array y aplicar el ordenamiento con el método que te mencioné; luego, quitarías las opciones que se muestran en la lista y los reemplazarías por opciones cuyos valores irían en el orden en el que quedó el array recién ordenado.
Un ejemplo:
Código HTML:
Ver original
<input type = "radio" name = "orden" value = "asc" /> Ascendente
<input type = "radio" name = "orden" value = "desc" /> Descendente
Código Javascript
:
Ver originaldocument.addEventListener("DOMContentLoaded", function(){ //Cuando haya cargado el DOM
//Declaro variables y tomo elementos
var lista = document.querySelector("#foo"),
radios = document.querySelectorAll("[name=orden]"),
opciones = [], nuevaOpcion;
//Recorro al conjunto de radio buttons
[].forEach.call(radios, function(radio){
//Cuando seleccione un radio button, ejecuto una función
radio.addEventListener("click", function(){
//Si el array "opciones" está vacío (esto ocurrirá solo una vez)
if (!opciones.length){
//Recorro la lista de opciones del <select>
[].forEach.call(lista.options, function(opcion){
//Y añado el valor y texto de cada opción al array "opciones"
opciones.push({
value: opcion.value,
text: opcion.text
});
});
}
//Quito las opciones del <select>
lista.options.length = 0;
//Si el orden seleccionado es "ascendente"
if (this.value == "asc"){
//Ordeno de manera ascendente a los valores del array "opciones"
opciones.sort(function(a, b){
return a.value - b.value;
});
}
//Si el orden seleccionado es "descendente"
else{
//Ordeno de manera descendente a los valores del array "opciones"
opciones.sort(function(a, b){
return b.value - a.value;
});
}
//Recorro el array "opciones"
opciones.forEach(function(opcion){
//Y creo opciones que tendrán los valores almacenados
nuevaOpcion = document.createElement("option");
nuevaOpcion.value = opcion.value;
nuevaOpcion.text = opcion.text;
lista.add(nuevaOpcion); //Para, finalmente, añadirlos al <select>
});
}, false);
});
}, false);
DEMO
Saludos