Printable View
I want to place to listboxes (drop-down with multi-select on) on a web page. I want to provide 2 buttons, "Add To List", "Remove From List". When the user clicks the "Add To List" button, I want the selected items in listbox1 to move over to listbox2. When they click on "Remove From List", I want the selected items in listbox2 to move back over to listbox1. Is this possible with JavaScript?
Any help or examples would be greatly appreciated.
Dan
Yes Dan, its very much possible with JavaScript. Here is an example that i used in one of my project.Quote:
Originally posted by dbassettt74
I want to place to listboxes (drop-down with multi-select on) on a web page. I want to provide 2 buttons, "Add To List", "Remove From List". When the user clicks the "Add To List" button, I want the selected items in listbox1 to move over to listbox2. When they click on "Remove From List", I want the selected items in listbox2 to move back over to listbox1. Is this possible with JavaScript?
Any help or examples would be greatly appreciated.
Dan
VBF does not allow html file to be uploaded so i changed the extention of the file to .txt, change it back to .html after you download.
Hope this helps.
Danial
Thanks, it worked perfectly!!
Is there anyway to get away from using the "temp" object to store the add items? Like maybe an array instead? I don't want to show an empty listbox on the screen. Can you help me with this?
Hi
here's an example is just did on the fly !
i did'nt put any remove or reset !
good luckCode:<HTML>
<script language=javascript>
function addIt(newValue, newText){
var newOption = new Option(newText,newValue,false,false);
document.forms[0].dest.options[document.forms[0].dest.length] = newOption;
}
</script>
<form>
<SELECT name=src size=8 onChange="addIt(this[this.selectedIndex].value,this[this.selectedIndex].text);">
<OPTION VALUE=1>Item 1</OPTION>
<OPTION VALUE=2>Item 2</OPTION>
<OPTION VALUE=3>Item 3</OPTION>
<OPTION VALUE=4>Item 4</OPTION>
<OPTION VALUE=5>Item 5</OPTION>
</SELECT>
<SELECT name=dest size=8>
</SELECT>
</form>
</HTML>
Hi Dan,Quote:
Originally posted by dbassettt74
Is there anyway to get away from using the "temp" object to store the add items? Like maybe an array instead? I don't want to show an empty listbox on the screen. Can you help me with this?
You can use style tag to make the temp listbox invisible,
<select name=temp size=0 style="visibility:hidden"></select>
And yes indeed you can use array, you will need a multi dimentional array to store both the value and text of the each item(notice that my code allows you to move multiple items from one listbox to another).
I havent used multi dimenational array in JavaScript that much and i was in a hurry thats why i choose to use a temp lisbox instead. You could give it a go if you wish. i will give it a try if i get time.
Danial