/    Sign up×
Community /Pin to ProfileBookmark

Moving Items Up and Down in a list box

First off, I’m VERY new to javascript, so any help would be much appreciated.

I’m trying to move items in a list box (<select><option>) up and down using an up button and a down button. I have found some code that looks like it works (the items move up and down on the display), but the actual order stays the same. Does that make sense?

What I’m trying to do is allow a user to determine the order of the fields for a query. Although it looks like the field order has changed when user clicks the up or down button, the fields still display in the original order.

Here’s the code I’m using:

[CODE]function swapListItems(lObj,direction)
{
if (direction == ‘up’)
{
var temp;
if (!(lObj.selectedIndex==0))
{
temp = lObj.options[lObj.selectedIndex-1].text;
lObj.options[lObj.selectedIndex-1].text = lObj.options[lObj.selectedIndex].text;
lObj.options[lObj.selectedIndex].text = temp;
}
}
else
{
var temp;
if (!(lObj.selectedIndex==lObj.options.length-1))
{
temp = lObj.options[lObj.selectedIndex+1].text;
lObj.options[lObj.selectedIndex+1].text = lObj.options[lObj.selectedIndex].text;
lObj.options[lObj.selectedIndex].text = temp;
}
}
}

//Function to Move List Items to Up
function moveUp()
{
var listObject = eval(document.tableEdit.selectedOptions);
if(!(listObject.selectedIndex==-1))
{
var selected = listObject.selectedIndex;
swapListItems(listObject,’up’);
listObject.selectedIndex = selected – 1;
}
else
{
alert(‘Please select an item to move up’);
}
}

//Function to Move List Items to Down
function moveDown()
{
var listObject = eval(document.tableEdit.selectedOptions);
if(!(listObject.selectedIndex==-1))
{
var selected = listObject.selectedIndex;
swapListItems(listObject,’down’);
listObject.selectedIndex = selected + 1;
}
else
{
alert(‘Please select an item to move down’);
}

}[/CODE]

Can anyone help??

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@himanetMar 18.2008 — The mistake you did is you are not retunring false aftet the fucntion call.

Just return false.

It will work
Copy linkTweet thisAlerts:
@himanetMar 18.2008 — function MoveUp(lst)

{

if(lst.selectedIndex == -1)

alert('Please select an Item to move up.');

else

{

if(lst.selectedIndex == 0)

{

alert('First element cannot be moved up');

return false

}

else

{

var tempValue = lst.options[lst.selectedIndex].value;

var tempIndex = lst.selectedIndex-1;

lst.options[lst.selectedIndex].value = lst.options[lst.selectedIndex-1].value;

lst.options[lst.selectedIndex-1].value = tempValue;

var tempText = lst.options[lst.selectedIndex].text;

lst.options[lst.selectedIndex].text = lst.options[lst.selectedIndex-1].text;

lst.options[lst.selectedIndex-1].text = tempText;

lst.selectedIndex = tempIndex;

}
}
return false;


}

function MoveDown(lst)

{

if(lst.selectedIndex == -1)

alert('Please select an Item to move down');

else

{

if(lst.selectedIndex == lst.options.length-1)
alert('Last element cannot be moved down');
else
{
var tempValue = lst.options[lst.selectedIndex].value;
var tempIndex = lst.selectedIndex+1;
lst.options[lst.selectedIndex].value = lst.options[lst.selectedIndex+1].value;
lst.options[lst.selectedIndex+1].value = tempValue;
var tempText = lst.options[lst.selectedIndex].text;
lst.options[lst.selectedIndex].text = lst.options[lst.selectedIndex+1].text;
lst.options[lst.selectedIndex+1].text = tempText;
lst.selectedIndex = tempIndex;
}
}
return false;


}

Happy coding

Regards

hima ,MVP,ASp.net

http://himabinduvejella.blogspot.com
Copy linkTweet thisAlerts:
@KorMar 18.2008 — If it is a contest ?, I dare also to enter with my DOM variant code
<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;script type="text/javascript"&gt;
/*&lt;![CDATA[*/
function moveO(name,w){
var sel=document.getElementsByName(name)[0];
var opt=sel.options[sel.selectedIndex];
if(w=='up'){
var prev=opt.previousSibling;
while(prev&amp;&amp;prev.nodeType!=1){
prev=prev.previousSibling;
}
prev?sel.insertBefore(opt,prev):sel.appendChild(opt)
}
else{
var next=opt.nextSibling;
while(next&amp;&amp;next.nodeType!=1){
next=next.nextSibling;
}
if(!next){sel.insertBefore(opt,sel.options[0])}
else{
var nextnext=next.nextSibling;
while(next&amp;&amp;next.nodeType!=1){
next=next.nextSibling;
}
nextnext?sel.insertBefore(opt,nextnext):sel.appendChild(opt);
}
}
}
/*]]&gt;*/
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form action=""&gt;
&lt;select name="sel" multiple="multiple"&gt;
&lt;option value="1"&gt;1&lt;/option&gt;
&lt;option value="2"&gt;2&lt;/option&gt;
&lt;option value="3"&gt;3&lt;/option&gt;
&lt;option value="4"&gt;4&lt;/option&gt;
&lt;option value="5"&gt;5&lt;/option&gt;
&lt;/select&gt;
&lt;br /&gt;
&lt;input type="button" value="UP" onclick="moveO('sel','up')" /&gt;
&lt;br /&gt;
&lt;input type="button" value="DOWN" onclick="moveO('sel','down')" /&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@phantom007May 11.2008 — Hi JS Gurus,

I need this JS for my page, however I need to have an array in the select box name. Like the following

<select name="[B]sel[][/B]" multiple="multiple">

But if I put this array in the above code then it does not work. Any ideas how to make it work with array in name?

Thanx
Copy linkTweet thisAlerts:
@KorMay 11.2008 — <i>
</i>...
&lt;input type="button" value="UP" onclick="moveO('[COLOR="Blue"]sel[][/COLOR]','up')" /&gt;
&lt;br /&gt;
&lt;input type="button" value="DOWN" onclick="moveO('[COLOR="Blue"]sel[][/COLOR]','down')" /&gt;
...
×

Success!

Help @smarch spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...