...

View Full Version : Shifting select value to top/bottom position



netty
06-21-2004, 02:44 AM
I have a script which shifts the postion of a value in a select list Up or Down. It move the position one up or one down. Now I want to add Top and Bottom as well. How can I shift to top or bottom position in one step? I mean that whole list moves up/down at one go and the selected value takes the top/bottom position. The part of my code looks like this....

<script>
function SelectMoveOption(the_option){
if (!the_option)
return null
the_option = new Option(the_option.text,the_option.value , false, false)
return the_option;
}

function Selectmove(the_select,the_list,direction){
for(i=0;i < the_select.options.length;i++){
if (the_select.options[i].selected){
if((i == 0)&&(direction == -1))
return null;
a = SelectMoveOption(the_select.options[i])
b = SelectMoveOption(the_select.options[i+direction])

if ((a != null) && (b != null)){
the_select.options[i] = b
a.selected = 1
the_select.options[i+direction] = a
i = i + 1
}
}
}
the_list.value = ''
for(i=0;i < the_select.options.length;i++){
the_list.value += the_select.options[i].value
if (i != the_select.options.length - 1)
the_list.value += ','
}
}
</script>



<button onclick="Selectmove(myform.ID,myform.listorder,-1);" >
UP</button>
<button onclick="Selectmove(myform.HomeID,myform.listorder,1);">
Down</button>

Thanks and your help is much appreciated

neofibril
06-22-2004, 03:24 PM
<body>
<script type="text/javascript">
function shiftOps(sEl, n)
{
var indx = sEl.selectedIndex;
if(indx < 0)
return false;
var targ,
ops = sEl.options,
ln = sEl.length - 1;
if(!n || n == ln)
targ = n;
else
{
var ofs = indx - n;
if(ofs + 1 && ofs <= ln)
targ = ofs;
}
if(targ >= 0)
{
var aNode = ops[indx].cloneNode(true),
bNode = ops[targ].cloneNode(true);
sEl.replaceChild(aNode, ops[targ]);
sEl.replaceChild(bNode, ops[indx]);
sEl.selectedIndex = targ;
}
sEl.focus();
}
</script>
<form style="text-align:center">
<select name="sel" size="5">
<option selected>voluptatem</option>
<option>laudantium</option>
<option>doloremque</option>
<option>consectetur</option>
<option>adipisicing</option>
</select>
<br>
<input type="button" value="Top" onclick="shiftOps(sel, 0)">
<input type="button" value="Up" onclick="shiftOps(sel, 1)">
<input type="button" value="Down" onclick="shiftOps(sel, -1)">
<input type="button" value="Bottom" onclick="shiftOps(sel, sel.length - 1)">
</form>
</body>

neofibril
06-22-2004, 05:46 PM
This one moves the options to top or bottom, without switching those node positions:


<body>
<script type="text/javascript">
function shiftOps(sEl, command)
{
var indx = sEl.selectedIndex;
if(indx < 0)
return false;
var ops = sEl.options,
ln = sEl.length - 1,
aNode = ops[indx].cloneNode(true);
switch(command)
{
case "up" : updn(1); break;
case "down" : updn(-1); break;
case "top" : tbot(0); break;
case "bottom" : tbot(ln); break;
}
function tbot(n)
{
var nullNode = document.createTextNode("");
if(n)
sEl.appendChild(aNode);
else
{
sEl.insertBefore(aNode, ops[n]);
indx = indx + 1;
}
sEl.replaceChild(nullNode, ops[indx]);
sEl.selectedIndex = n;
}
function updn(n)
{
n = indx - n;
if(n + 1 && n <= ln)
{
var bNode = ops[n].cloneNode(true);
sEl.replaceChild(aNode, ops[n]);
sEl.replaceChild(bNode, ops[indx]);
sEl.selectedIndex = n;
}
}
sEl.focus();
}
</script>
<form style="text-align:center">
<select name="sel" size="5">
<option selected>voluptatem</option>
<option>laudantium</option>
<option>doloremque</option>
<option>consectetur</option>
<option>adipisicing</option>
</select>
<br>
<input type="button" value="Top" onclick="shiftOps(sel, 'top')">
<input type="button" value="Up" onclick="shiftOps(sel, 'up')">
<input type="button" value="Down" onclick="shiftOps(sel, 'down')">
<input type="button" value="Bottom" onclick="shiftOps(sel, 'bottom')">
</form>
</body>

neofibril
06-22-2004, 08:06 PM
I should have used removeChild, instead of replacing w/ a textNode, so:


<body>
<script type="text/javascript">
function shiftOps(sEl, command)
{
var indx = sEl.selectedIndex;
if(indx < 0)
return false;
var ops = sEl.options,
ln = sEl.length - 1,
aNode = ops[indx].cloneNode(true);
switch(command)
{
case "up" : updn(1); break;
case "down" : updn(-1); break;
case "top" : tbot(0); break;
case "bottom" : tbot(ln); break;
}
function tbot(n)
{
if(n)
sEl.appendChild(aNode);
else
{
sEl.insertBefore(aNode, ops[n]);
indx = indx + 1;
}
sEl.removeChild(ops[indx]);
sEl.selectedIndex = n;
}
function updn(n)
{
n = indx - n;
if(n + 1 && n <= ln)
{
var bNode = ops[n].cloneNode(true);
sEl.replaceChild(aNode, ops[n]);
sEl.replaceChild(bNode, ops[indx]);
sEl.selectedIndex = n;
}
}
sEl.focus();
}
</script>
<form style="text-align:center">
<select name="sel" size="5">
<option selected>voluptatem</option>
<option>laudantium</option>
<option>doloremque</option>
<option>consectetur</option>
<option>adipisicing</option>
</select>
<br>
<input type="button" value="Top" onclick="shiftOps(sel, 'top')">
<input type="button" value="Up" onclick="shiftOps(sel, 'up')">
<input type="button" value="Down" onclick="shiftOps(sel, 'down')">
<input type="button" value="Bottom" onclick="shiftOps(sel, 'bottom')">
</form>
</body>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum