jQuery can easily sort the selectbox without touching the HTML or server side code using jQuery sort function. Some time we need to sort selectbox values ascending and descending. Then we can simply execute following function to sort the select box. please add jQuery before the follow script. follow example sort the select box that have ID called MySelect you can use your own jQuery selector instead of this
//function for sort the select box options - call this within event such as document ready/click
function sortDropDownListByText(selectID) {
// Loop for each select element on the page.
$("select#"+selectID).each(function() {
// Keep track of the selected option.
var selectedValue = $(this).val();
// Sort all the options by text. I could easily sort these by val.
$(this).html($("option", $(this)).sort(function(a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}));
// Select one option.
$(this).val(selectedValue);
});
}
Here is full html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Two Sided Multi Select Example Demo</title>
<script type="text/ecmascript" src="jquery.1.7.1.min.js"></script>
<script type="text/javascript">
function sortDropDownListByText(selectID) {
// Loop for each select element on the page.
$("select#"+selectID).each(function() {
// Keep track of the selected option.
var selectedValue = $(this).val();
// Sort all the options by text. I could easily sort these by val.
$(this).html($("option", $(this)).sort(function(a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}));
// Select one option.
$(this).val(selectedValue);
});
}
</script>
</head>
<body>
<table width="728" border="0" style="margin:auto;" cellpadding="0" cellspacing="0">
<tr>
<td style="padding:5px; background-color:#FFCEB7;">
<select name="sortselect" id="sortselect" size="5" multiple="multiple" style="width:300px;">
<option value="Option1">Option1</option>
<option value="Option3">Option3</option>
<option value="Option6">Option6</option>
<option value="Option8">Option8</option>
<option value="Option4">Option4</option>
<option value="Option2">Option2</option>
<option value="Option7">Option7</option>
<option value="Option9">Option9</option>
<option value="Option5">Option5</option>
</select>
</td>
</tr>
<tr>
<td style="padding:5px; background-color:#FFCEB7; padding-left:245px;">
<input type="button" name="btnbutton" id="btnbutton" value="SORT" onclick="sortDropDownListByText('sortselect');" />
</td>
</tr>
</table>
</body>
</html>
[...] You can find my previous article Select box sorter [...]
Thanks for the code, was a quick integration into what I needed it for but i do have a question. Say I have a list of items and then at the top of that list I have a select all option and when I sort that gets pushed down as “All” < "Ale" (for example). What do you think would be an easy way to add exceptions for that.
I will most likely find the answer for this before anyone will respond but just something to think about.