Multiple Select List Boxes

<i><b>Originally posted by : Ted (TidyTed@yahoo.com)</b></i><br />Does any one know any good demos or sample code to use a multiple select list box to insert data into a table?<br /><br />Ideally, I want to use a list box that when items are selected they appear in another list box and are then submited.i.e<br /><br />A...............B<br />B...............D<br />C...............G<br />D < - -> <br />E<br />F<br />G<br /><br />B,D and G are selected<br /><br />Cheers<br /><br />

<i><b>Originally posted by : Abdul Khan (ayazkhan@mailcity.com)</b></i><br /><br /><br /><br />Use this code to swap items from one list box to other.<br /><br /><br /><br /><!-- TWO STEPS TO INSTALL MENU SWAPPER:<br /><br /> 1. Copy the coding into the HEAD of your HTML document<br /> 2. Add the last code into the BODY of your HTML document --><br /><br /><!-- STEP ONE: Paste this code into the HEAD of your HTML document --><br /><br /><SCRIPT LANGUAGE="JavaScript"><br /><br /><!-- This script and many more are available free online at --><br /><!-- The JavaScript Source!! http://javascript.internet.com --><br /><br /><!-- Begin<br />sortitems = 1; // Automatically sort items within lists? (1 or 0)<br /><br />function move(fbox,tbox) {<br />for(var i=0; i<fbox.options.length; i++) {<br />if(fbox.options[i].selected && fbox.options[i].value != "") {<br />var no = new Option();<br />no.value = fbox.options[i].value;<br />no.text = fbox.options[i].text;<br />tbox.options[tbox.options.length] = no;<br />fbox.options[i].value = "";<br />fbox.options[i].text = "";<br /> }<br />}<br />BumpUp(fbox);<br />if (sortitems) SortD(tbox);<br />}<br />function BumpUp(box) {<br />for(var i=0; i<box.options.length; i++) {<br />if(box.options[i].value == "") {<br />for(var j=i; j<box.options.length-1; j++) {<br />box.options[j].value = box.options[j+1].value;<br />box.options[j].text = box.options[j+1].text;<br />}<br />var ln = i;<br />break;<br /> }<br />}<br />if(ln < box.options.length) {<br />box.options.length -= 1;<br />BumpUp(box);<br /> }<br />}<br /><br />function SortD(box) {<br />var temp_opts = new Array();<br />var temp = new Object();<br />for(var i=0; i<box.options.length; i++) {<br />temp_opts[i] = box.options[i];<br />}<br />for(var x=0; x<temp_opts.length-1; x++) {<br />for(var y=(x+1); y<temp_opts.length; y++) {<br />if(temp_opts[x].text > temp_opts[y].text) {<br />temp = temp_opts[x].text;<br />temp_opts[x].text = temp_opts[y].text;<br />temp_opts[y].text = temp;<br /> }<br /> }<br />}<br />for(var i=0; i<box.options.length; i++) {<br />box.options[i].value = temp_opts[i].value;<br />box.options[i].text = temp_opts[i].text;<br /> }<br />}<br />// End --><br /></script><br /><br /><!-- STEP TWO: Copy this code into the BODY of your HTML document --><br /><br /><center><br /><form ACTION="" METHOD="POST"><br /><table border="0"><br /><tr><br /><td><select multiple size="5" name="list1"><br /><option value="11"> item 1.1 </option><br /><option value="12"> item 1.2 </option><br /><option value="13"> item 1.3 </option><br /></select></td><br /><td><br /><input type="button" value=" >> " onclick="move(this.form.list1,this.form.list2)" name="B1"><br><br /><input type="button" value=" << " onclick="move(this.form.list2,this.form.list1)" name="B2"><br /></td><br /><td><select multiple size="5" name="list2"><br /><option value="21"> item 2.1 </option><br /><option value="22"> item 2.2 </option><br /><option value="23"> item 2.3 </option><br /></select></td><br /></tr><br /></table><br /></form><br /></center><br /><br /><p><center><br /><font face="arial, helvetica" size="-2">Free JavaScripts provided<br><br />by <a href="http://javascriptsource.com">The JavaScript Source</a></font><br /></center><p><br /><br /><!-- Script Size: 2.52 KB --><br /><br /><br />------------<br />Ted at 8/25/2000 9:08:14 AM<br /><br />Does any one know any good demos or sample code to use a multiple select list box to insert data into a table?<br /><br />Ideally, I want to use a list box that when items are selected they appear in another list box and are then submited.i.e<br /><br />A...............B<br />B...............D<br />C...............G<br />D < - -> <br />E<br />F<br />G<br /><br />B,D and G are selected<br /><br />Cheers<br /><br />

<i><b>Originally posted by : Ted (TidyTed@yahoo.com)</b></i><br />Thanks for the help Abdul! That code is great.<br /><br />Do you know how to use this data and turn it into an SQL string to insert into a database?<br /><br /><br />------------<br />Abdul Khan at 8/27/2000 10:27:19 AM<br /><br /><br /><br /><br />Use this code to swap items from one list box to other.<br /><br /><br /><br /><!-- TWO STEPS TO INSTALL MENU SWAPPER:<br /><br /> 1. Copy the coding into the HEAD of your HTML document<br /> 2. Add the last code into the BODY of your HTML document --><br /><br /><!-- STEP ONE: Paste this code into the HEAD of your HTML document --><br /><br /><SCRIPT LANGUAGE="JavaScript"><br /><br /><!-- This script and many more are available free online at --><br /><!-- The JavaScript Source!! http://javascript.internet.com --><br /><br /><!-- Begin<br />sortitems = 1; // Automatically sort items within lists? (1 or 0)<br /><br />function move(fbox,tbox) {<br />for(var i=0; i<fbox.options.length; i++) {<br />if(fbox.options[i].selected && fbox.options[i].value != "") {<br />var no = new Option();<br />no.value = fbox.options[i].value;<br />no.text = fbox.options[i].text;<br />tbox.options[tbox.options.length] = no;<br />fbox.options[i].value = "";<br />fbox.options[i].text = "";<br /> }<br />}<br />BumpUp(fbox);<br />if (sortitems) SortD(tbox);<br />}<br />function BumpUp(box) {<br />for(var i=0; i<box.options.length; i++) {<br />if(box.options[i].value == "") {<br />for(var j=i; j<box.options.length-1; j++) {<br />box.options[j].value = box.options[j+1].value;<br />box.options[j].text = box.options[j+1].text;<br />}<br />var ln = i;<br />break;<br /> }<br />}<br />if(ln < box.options.length) {<br />box.options.length -= 1;<br />BumpUp(box);<br /> }<br />}<br /><br />function SortD(box) {<br />var temp_opts = new Array();<br />var temp = new Object();<br />for(var i=0; i<box.options.length; i++) {<br />temp_opts[i] = box.options[i];<br />}<br />for(var x=0; x<temp_opts.length-1; x++) {<br />for(var y=(x+1); y<temp_opts.length; y++) {<br />if(temp_opts[x].text > temp_opts[y].text) {<br />temp = temp_opts[x].text;<br />temp_opts[x].text = temp_opts[y].text;<br />temp_opts[y].text = temp;<br /> }<br /> }<br />}<br />for(var i=0; i<box.options.length; i++) {<br />box.options[i].value = temp_opts[i].value;<br />box.options[i].text = temp_opts[i].text;<br /> }<br />}<br />// End --><br /></script><br /><br /><!-- STEP TWO: Copy this code into the BODY of your HTML document --><br /><br /><center><br /><form ACTION="" METHOD="POST"><br /><table border="0"><br /><tr><br /><td><select multiple size="5" name="list1"><br /><option value="11"> item 1.1 </option><br /><option value="12"> item 1.2 </option><br /><option value="13"> item 1.3 </option><br /></select></td><br /><td><br /><input type="button" value=" >> " onclick="move(this.form.list1,this.form.list2)" name="B1"><br><br /><input type="button" value=" << " onclick="move(this.form.list2,this.form.list1)" name="B2"><br /></td><br /><td><select multiple size="5" name="list2"><br /><option value="21"> item 2.1 </option><br /><option value="22"> item 2.2 </option><br /><option value="23"> item 2.3 </option><br /></select></td><br /></tr><br /></table><br /></form><br /></center><br /><br /><p><center><br /><font face="arial, helvetica" size="-2">Free JavaScripts provided<br><br />by <a href="http://javascriptsource.com">The JavaScript Source</a></font><br /></center><p><br /><br /><!-- Script Size: 2.52 KB --><br /><br /><br />------------<br />Ted at 8/25/2000 9:08:14 AM<br /><br />Does any one know any good demos or sample code to use a multiple select list box to insert data into a table?<br /><br />Ideally, I want to use a list box that when items are selected they appear in another list box and are then submited.i.e<br /><br />A...............B<br />B...............D<br />C...............G<br />D < - -> <br />E<br />F<br />G<br /><br />B,D and G are selected<br /><br />Cheers<br /><br />

<i><b>Originally posted by : Abdul (ayazkhan@mailcity.com)</b></i><br />Hi,<br /><br />What's your real name and where are you from.<br /><br />By the way, I have recently succeded in capturing the values from the final list box and inserted in the SQL database.<br /><br />The techinique is simple, when ever a user selects an item, intialize that value to a hidden text field.<br /><br /><br /><br /><br /><br /><br /><br />------------<br />Ted at 8/29/2000 4:50:46 AM<br /><br />Thanks for the help Abdul! That code is great.<br /><br />Do you know how to use this data and turn it into an SQL string to insert into a database?<br /><br /><br />------------<br />Abdul Khan at 8/27/2000 10:27:19 AM<br /><br /><br /><br /><br />Use this code to swap items from one list box to other.<br /><br /><br /><br /><!-- TWO STEPS TO INSTALL MENU SWAPPER:<br /><br /> 1. Copy the coding into the HEAD of your HTML document<br /> 2. Add the last code into the BODY of your HTML document --><br /><br /><!-- STEP ONE: Paste this code into the HEAD of your HTML document --><br /><br /><SCRIPT LANGUAGE="JavaScript"><br /><br /><!-- This script and many more are available free online at --><br /><!-- The JavaScript Source!! http://javascript.internet.com --><br /><br /><!-- Begin<br />sortitems = 1; // Automatically sort items within lists? (1 or 0)<br /><br />function move(fbox,tbox) {<br />for(var i=0; i<fbox.options.length; i++) {<br />if(fbox.options[i].selected && fbox.options[i].value != "") {<br />var no = new Option();<br />no.value = fbox.options[i].value;<br />no.text = fbox.options[i].text;<br />tbox.options[tbox.options.length] = no;<br />fbox.options[i].value = "";<br />fbox.options[i].text = "";<br /> }<br />}<br />BumpUp(fbox);<br />if (sortitems) SortD(tbox);<br />}<br />function BumpUp(box) {<br />for(var i=0; i<box.options.length; i++) {<br />if(box.options[i].value == "") {<br />for(var j=i; j<box.options.length-1; j++) {<br />box.options[j].value = box.options[j+1].value;<br />box.options[j].text = box.options[j+1].text;<br />}<br />var ln = i;<br />break;<br /> }<br />}<br />if(ln < box.options.length) {<br />box.options.length -= 1;<br />BumpUp(box);<br /> }<br />}<br /><br />function SortD(box) {<br />var temp_opts = new Array();<br />var temp = new Object();<br />for(var i=0; i<box.options.length; i++) {<br />temp_opts[i] = box.options[i];<br />}<br />for(var x=0; x<temp_opts.length-1; x++) {<br />for(var y=(x+1); y<temp_opts.length; y++) {<br />if(temp_opts[x].text > temp_opts[y].text) {<br />temp = temp_opts[x].text;<br />temp_opts[x].text = temp_opts[y].text;<br />temp_opts[y].text = temp;<br /> }<br /> }<br />}<br />for(var i=0; i<box.options.length; i++) {<br />box.options[i].value = temp_opts[i].value;<br />box.options[i].text = temp_opts[i].text;<br /> }<br />}<br />// End --><br /></script><br /><br /><!-- STEP TWO: Copy this code into the BODY of your HTML document --><br /><br /><center><br /><form ACTION="" METHOD="POST"><br /><table border="0"><br /><tr><br /><td><select multiple size="5" name="list1"><br /><option value="11"> item 1.1 </option><br /><option value="12"> item 1.2 </option><br /><option value="13"> item 1.3 </option><br /></select></td><br /><td><br /><input type="button" value=" >> " onclick="move(this.form.list1,this.form.list2)" name="B1"><br><br /><input type="button" value=" << " onclick="move(this.form.list2,this.form.list1)" name="B2"><br /></td><br /><td><select multiple size="5" name="list2"><br /><option value="21"> item 2.1 </option><br /><option value="22"> item 2.2 </option><br /><option value="23"> item 2.3 </option><br /></select></td><br /></tr><br /></table><br /></form><br /></center><br /><br /><p><center><br /><font face="arial, helvetica" size="-2">Free JavaScripts provided<br><br />by <a href="http://javascriptsource.com">The JavaScript Source</a></font><br /></center><p><br /><br /><!-- Script Size: 2.52 KB --><br /><br /><br />------------<br />Ted at 8/25/2000 9:08:14 AM<br /><br />Does any one know any good demos or sample code to use a multiple select list box to insert data into a table?<br /><br />Ideally, I want to use a list box that when items are selected they appear in another list box and are then submited.i.e<br /><br />A...............B<br />B...............D<br />C...............G<br />D < - -> <br />E<br />F<br />G<br /><br />B,D and G are selected<br /><br />Cheers<br /><br />