Question

I have been trying to get a more dynamic solution than naming all dropdowns individually and I believe I have missed the selector boat. I want to do something like the following:

$(function () {    
    // loop through all the lists
    $("select").each(function(){
       var myId = $(this).attr('id'); 
       sortDropDownListByText(myId);
    });

    // pass the Id to a function to sort
    function sortDropDownListByText(selectId) {     
        $(selectId).html($(selectId + " option").sort(function(a, b) {        
            return a.text == b.text ? 0 : a.text < b.text ? -1 : 1     
        }))  
    }
});

My end goal will have a CSS class as the selector rather than all but I feel that the solution here will give me what I need there.

Answer 1

The following solved my initial question. 🙂

$(document).ready(function () {
    $('select').each(function () {
       sortDropDownListByText(this);
    });
});

// pass the select object to a function to sort  
function sortDropDownListByText(selectObject) {
    $(selectObject).html($("option", selectObject).sort(function (a, b) {
        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
    }));
}