I have a function that, when the user selects one or more items, it moves those items to the top of the list box (still selected) and scrolls to the top so they’re visible. It works in all major browsers that I’ve tested. The problem comes when I have this function sort a listbox inside of a table cell. When I do that and use IE8, it sorts & highlights properly but doesn’t scroll to the top. The JavaScript passes basic JSLint checking and the webpage passes HTML validation. Did I find a quirk with IE8? Am I coding this listbox sort & scroll function the wrong way?
<script type="text/javascript">
function Arrange(obj) {
var countSel = 0, countNSel = 0, i, arr_selected = [], arr_unselected = [];
for (i = 0; i <= obj.length - 1; i++) {
if (obj.options[i].selected) {
//create array with all selected items then sort it
arr_selected[countSel] = [];
arr_selected[countSel][0] = obj.options[i].text;
arr_selected[countSel][1] = obj.options[i].value;
countSel = countSel + 1;
arr_selected.sort();
}
else {
//create array with all UNselected items then sort it
arr_unselected[countNSel] = [];
arr_unselected[countNSel][0] = obj.options[i].text;
arr_unselected[countNSel][1] = obj.options[i].value;
countNSel = countNSel + 1;
arr_unselected.sort();
}
}
if (countSel !== 0) {
//overwrite listbox options with selected items
for (i = 0; i <= countSel - 1; i++) {
obj.options[i] = new Option(arr_selected[i][0], arr_selected[i][1]);
}
//overwrite listbox options with UNselected items
for (i = 0; i <= countNSel - 1; i++) {
obj.options[countSel] = new Option(arr_unselected[i][0], arr_unselected[i][1]);
countSel = countSel + 1;
}
}
//for showing selected items
//scroll to the top of the list and select the appropriate items
//it's in reverse order because IE8 wanted to only scroll to the last item selected
obj.selectedIndex = 0;
for (i = arr_selected.length - 1; i >= 0; i--) {
obj.options[i].selected = true;
}
}
</script>
</head>
<body>
<form name="frm" action="post">
<table><tr><td>test:</td><td>
<select size="4" name="cbostaffcontact" multiple onblur="Arrange(document.forms[0].cbostaffcontact);">
<option value="user1">Al</option>
<option value="user2">Bob</option>
<option value="user3">Christy</option>
<option value="user4">Jane</option>
<option value="user5">Randy</option>
<option value="user6">Tom</option>
<option value="user7">Zed</option>
</select>
</td></tr></table>
</form>
It’s probably a quirk in IE8, but your code doesn’t actually say anything about scrolling, so I wouldn’t blame IE8. Here is a simple instruction that should solve your problem: