Introduction
This client-side JavaSscript code enables to transform a multiple Select
element into a sorted control that can help in producing the "order by
" clause of a SQL query, and with that sort the table records accordingly to the selected elements.
If we have a DB table that has five columns and we would like to sort the date according to columns 3, 2, 1, all we will need to do is to click on those columns in that order in the multiple Select element that will reorder the list of its options accordingly.
This code deals only with the client side and not the actual data retrieval, even thought the principle is simple. We connect together the SQL query with the list of columns delimited by comma, after the order by
clause. For example:
Select column1, column2, column3, column4, column5 from TableX
where ConditionY order by (columns names from the reorder select control )
The reorder select control holds the columns of the table as its options. On each click on one of the options, the code will bring the first selected option to the top of the list. In the second selection, the selected element will become the second on the list and so on... In the end, you will get a new sorted list of columns you can sort your table by. When the form is submitted, a hidden element holds the reordered list and you will be able to use the value of this element in your SQL query generator code.
Just copy paste the code to a new page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test page</title>
</head>
<body>
<script type="text/jscript">
function sortedSelectClass(htmlSelectElementObj){
var cursor = 0;
var lastSelectedIndex=0;
var selectedElement = null;
var HTMLControl = htmlSelectElementObj;
var controlLength = htmlSelectElementObj.length;
var savedEelemntsValuse = new Array(controlLength)
var savedEelemntsText = new Array(controlLength)
var selectedElementsList ='';
for(var i=0;i<controlLength;i++){
savedEelemntsValuse[i]=HTMLControl[i].value;
savedEelemntsText[i]=HTMLControl[i].text;
HTMLControl[i].selected = false;
}
this.selectItem = function(){
var rv;
for (var i=0; i< controlLength; i++) {
if (HTMLControl[i].selected) {
selectedElement = HTMLControl[i];
lastSelectedIndex = i;
}
}
}
this.move = function(){
selectedElementsList ="";
this.selectItem() ;
if (cursor < controlLength && lastSelectedIndex >= cursor ){
var priviosObjectValue = HTMLControl[cursor].value;
var priviosObjectText = HTMLControl[cursor].text;
HTMLControl[cursor].value = selectedElement.value;
HTMLControl[cursor].text = selectedElement.text;
HTMLControl[cursor].style.color='red';
HTMLControl[lastSelectedIndex].value = priviosObjectValue;
HTMLControl[lastSelectedIndex].text = priviosObjectText;
cursor++;
}
else if (cursor >= controlLength){
cursor=0;
}
else{
cursor=cursor;
}
for(var i=0;i<controlLength;i++){
HTMLControl[i].selected = false;
if(HTMLControl[i].style.color=='red')
selectedElementsList += HTMLControl[i].value + ",";
}
}
this.clear = function(){
for(var i=0;i<controlLength;i++){
HTMLControl[i].value = savedEelemntsValuse[i];
HTMLControl[i].text = savedEelemntsText[i];
HTMLControl[i].selected = false;
HTMLControl[i].style.color='black';
}
cursor=0;
lastSelectedIndex=0;
selectedElement = null;
}
this.getSelectedElements = function(){
var rv="";
if (selectedElementsList != null && selectedElementsList.indexOf(',')!= -1)
rv = selectedElementsList.substring(0,(selectedElementsList.length)-1)
return rv;
}
}
function showParam(theSortedColumns){
alert(theSortedColumns);
}
</script>
<form id="form1" onsubmit="showParam(selectClassObj1.getSelectedElements())">
<table>
<tr>
<td id=selectObj1>
<select name="test" multiple="multiple"
onchange="selectClassObj1.move()" size="5">
<option value="1">op1</option>
<option value="2">op2</option>
<option value="3">op3</option>
<option value="4">op4</option>
<option value="5">op5</option>
</select>
</td>
</tr>
<tr>
<td><input type="button" name="clear"
value="Clear" onclick="selectClassObj1.clear();" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr><td><input type="submit" value="submit" /></td></tr>
</table>
</form>
</body>
<script>
var selectClassObj1 = new sortedSelectClass(document.all.test);
</script>
</html>
Version control
- Bug fix: 11/06/07: selecting an element that was already selected, in reply to juvo.