Full version: jsB@nk » Form » Dropdown » PickList II
URL: https://www.javascriptbank.com/picklist-ii.html
This JavaScript code code moves form elements from one select box to the other. It allows for multiple items to be moved at once, and all items are sorted alphabetically as they are moved. The items are sorted by their description, not their value, which is helpful when pulling items from a database which have random IDs associated with them.Note: The function move merely moves the items back and forth. This function alone will not select any of the items to be sent along with the post. In other words nothing will be sent in the form when you submit it unless some items are selected (highlighted) or additional JavaScript code it used. In this page I have added the function selectAll which loops through the righthand box and selects all the items before the form is submitted. This is much more intuitive for the user. The function selectAll is called in the onClick event of the submit button.
Full version: jsB@nk » Form » Dropdown » PickList II
URL: https://www.javascriptbank.com/picklist-ii.html
<script type="text/javascript">// PickList II script (aka Menu Swapper)- By Phil Webb (http://www.philwebb.com)// Please keep this notice intactfunction move(fbox, tbox) { var arrFbox = new Array(); var arrTbox = new Array(); var arrLookup = new Array(); var i; for(i=0; i<tbox.options.length; i++) { arrLookup[tbox.options[i].text] = tbox.options[i].value; arrTbox[i] = tbox.options[i].text; } var fLength = 0; var tLength = arrTbox.length for(i=0; i<fbox.options.length; i++) { arrLookup[fbox.options[i].text] = fbox.options[i].value; if(fbox.options[i].selected && fbox.options[i].value != "") { arrTbox[tLength] = fbox.options[i].text; tLength++; } else { arrFbox[fLength] = fbox.options[i].text; fLength++; } } arrFbox.sort(); arrTbox.sort(); fbox.length = 0; tbox.length = 0; var c; for(c=0; c<arrFbox.length; c++) { var no = new Option(); no.value = arrLookup[arrFbox[c]]; no.text = arrFbox[c]; fbox[c] = no; } for(c=0; c<arrTbox.length; c++) { var no = new Option(); no.value = arrLookup[arrTbox[c]]; no.text = arrTbox[c]; tbox[c] = no; }}function selectAll(box) { for(var i=0; i<box.length; i++) { box[i].selected = true; }}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><form method="post" name="combo_box"><table cellpadding="4" cellspacing="0" border="0"><tr><td><select multiple size="10" name="list1" style="width:150" onDblClick="move(document.combo_box.list1,document.combo_box.list2)"><option value="12">Alabama</option><option value="54">Alaska</option><option value="65">Arizona</option><option value="45">Arkansas</option><option value="2">California</option><option value="6">Colorado</option><option value="81">Connecticut</option><option value="5">Delaware</option><option value="23">District of Columbia</option><option value="58">Florida</option><option value="87">Georgia</option><option value="98">Hawaii</option><option value="53">Idaho</option><option value="22">Illinois</option><option value="28">Indiana</option><option value="89">Iowa</option><option value="71">Kansas</option><option value="35">Kentucky</option><option value="85">Louisiana</option><option value="9">Maine</option><option value="7">Maryland</option><option value="77">Massachusetts</option><option value="36">Michigan</option><option value="87">Minnesota</option><option value="66">Mississippi</option><option value="34">Missouri</option><option value="50">Montana</option><option value="20">Nebraska</option><option value="25">Nevada</option><option value="32">New Hampshire</option><option value="27">New Jersey</option><option value="74">New Mexico</option><option value="17">New York</option><option value="3">North Carolina</option><option value="13">North Dakota</option><option value="4">Ohio</option><option value="21">Oklahoma</option><option value="12">Oregon</option><option value="48">Pennsylvania</option><option value="63">Rhode Island</option><option value="82">South Carolina</option><option value="14">South Dakota</option><option value="72">Tennessee</option><option value="49">Texas</option><option value="47">Utah</option><option value="92">Vermont</option><option value="59">Virginia</option><option value="52">Washington</option><option value="41">West Virginia</option><option value="46">Wisconsin</option><option value="95">Wyoming</option></select></td><td align="center" valign="middle"><input type="button" onClick="move(this.form.list2,this.form.list1)" value="<<" id=button1 name=button1><input type="button" onClick="move(this.form.list1,this.form.list2)" value=">>" id=button2 name=button2></td><td><select multiple size="10" name="list2" style="width:150" onDblClick="move(document.combo_box.list2,document.combo_box.list1)"></select></td></tr><tr><td align="center" colspan="3"><input type="submit" name="submit_button" value="Submit" onClick="selectAll(document.combo_box.list2);"></td></tr></table></form><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->