If i press the button "MOVE UP", it will go to the top of the select
box.
If i press the button "MOVE DOWN", it will go to the bottom of the
select box.
The selected values that the user select will still be selected, even
if i press up or down.
It works in firefox....but not IE ? coz the scrollTop does not work in
IE.....
Is there any other way ?
Here the source :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
</head>
<script type="text/javascript">
var bw = new lib_bwcheck()
function lib_bwcheck()
{
this.ver = navigator.appVersion
this.agent = navigator.userAgent
this.dom = document.getElementById?1:0
this.opera5 = this.agent.indexOf("Opera 5")>-1
this.ie5 = (this.ver.indexOf("MSIE 5")>-1 && this.dom &&
!this.opera5)?1:0;
this.ie6 = (this.ver.indexOf("MSIE 6")>-1 && this.dom &&
!this.opera5)?1:0;
this.ie4 = (document.all && !this.dom && !this.opera5)?1:0;
this.ie = this.ie4||this.ie5||this.ie6
this.mac = this.agent.indexOf("Mac")>-1
this.ns6 = (this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4 = (document.layers && !this.dom)?1:0;
this.bw = (this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6
|| this.opera5)
return this;
}
function moveBar(id, pos)
{
lb = document.getElementById(id);
arr = getMultiple(lb);
if (bw.ie)
{ if (pos == "top")
{ lb.selectedIndex = 0;
}
else
{ lb.selectedIndex = lb.length - 1;
lb.selectedIndex = -1;
}
}
else
{ if (pos == "top")
lb.scrollTop = 0;
else
lb.scrollTop = 50;
}
}
function getMultiple(lb)
{
var keep_array = new Array();
for (var i=0;i<Number(lb.length);i++)
{ if (lb.options[i].selected == true)
{ keep_array.push(i);
}
}
return keep_array;
}
</script>
<body>
<table width="200" border="0">
<tr>
<td><select class="Textfield" size="5" name="se" id="se" multiple >
<option value=""></option>
<option value="3">Value1</option>
<option value="4">Value2</option>
<option value="1">Value3</option>
<option value="6">Value4</option>
<option value="2">Value5</option>
<option value="3">Value6</option>
<option value="4">Value7</option>
<option value="1">Value8</option>
<option value="6">Value9</option>
<option value="2">Value10</option>
<option value="3">Value11</option>
<option value="4">Value12</option>
<option value="1">Value13</option>
<option value="6">Value14</option>
<option value="2">Value15</option>
<option value="3">Value16</option>
<option value="4">Value17</option>
<option value="1">Value18</option>
<option value="6">Value19</option>
<option value="2">Value20</option>
<option value="3">Value21</option>
<option value="4">Value22</option>
</select>
</td>
<td>
<input type="button" name="click" value="MOVE UP"
onClick="moveBar('se', 'top')">
<input type="button" name="click" value="MOVE DOWN"
onClick="moveBar('se', 'bottom')"></td>
</tr>
</table>
</body>
