Full version: jsB@nk » Form » Dropdown » Select Box with Options
URL: https://www.javascriptbank.com/select-box-with-options.html
Use this JavaScript to easily change the order of options in a select box. You can see the order change as it happens in the "New Order" box. (The input can be hidden and used to change the order on the server side.)
Full version: jsB@nk » Form » Dropdown » Select Box with Options
URL: https://www.javascriptbank.com/select-box-with-options.html
<script>// Created by: Krijn Hoetmer ~ http://krijnhoetmer.nl/// Paul Gration ~ http://i-labs.co.uk/function moveUp(element) { for(i = 0; i < element.options.length; i++) { if(element.options[i].selected == true) { if(i != 0) { var temp = new Option(element.options[i-1].text,element.options[i-1].value); var temp2 = new Option(element.options[i].text,element.options[i].value); element.options[i-1] = temp2; element.options[i-1].selected = true; element.options[i] = temp; } } }}function moveDown(element) { for(i = (element.options.length - 1); i >= 0; i--) { if(element.options[i].selected == true) { if(i != (element.options.length - 1)) { var temp = new Option(element.options[i+1].text,element.options[i+1].value); var temp2 = new Option(element.options[i].text,element.options[i].value); element.options[i+1] = temp2; element.options[i+1].selected = true; element.options[i] = temp; } } }}function updateList(list, textBox) { textBox.value = ''; for(i = 0; i < list.options.length; i++) { if (i == 0) { textBox.value += list.options[i].value; } else { textBox.value += ',' + list.options[i].value; } }}function swap(list) { var j = 0; for(i = 0; i < list.options.length; i++) { if(list.options[i].selected == true) { j++; switch (j) { case 1: var i1 = i; var temp = new Option(list.options[i].text, list.options[i].value); break; case 2: var i2 = i; var temp2 = new Option(list.options[i].text, list.options[i].value); break; } } } if (j != 2) { alert('Only 2 items can be swapped'); } else { list.options[i1] = temp2; list.options[i1].selected = true; list.options[i2] = temp; list.options[i2].selected = true; }}window.onload = function() { updateList(document.getElementById('move'), document.getElementById('newList'));}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><form action="#" method="post"> <dl> <dt><strong>Options:</strong></dt> <dd> <select id="move" multiple="multiple" size="10"> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> <option value="4">option 4</option> <option value="5">option 5</option> <option value="6">option 6</option> <option value="7">option 7</option> <option value="8">option 8</option> <option value="9">option 9</option> <option value="10">option 10</option> </select> </dd> <dt><strong>Order:</strong></dt> <dd><input type="button" onclick="moveUp(document.getElementById('move'));updateList(document.getElementById('move'), document.getElementById('newList'));" value="Move Up"></dd> <dd><input type="button" onclick="moveDown(document.getElementById('move'));updateList(document.getElementById('move'), document.getElementById('newList'));" value="Move Down"></dd> <dd><input type="button" onclick="swap(document.getElementById('move'));updateList(document.getElementById('move'), document.getElementById('newList'));" value="Swap 2 Options"></dd> <dt><br><strong>New order:</strong> <input type="text" id="newList" name="newList" value="" readonly="readonly" style="border: none;"></dd> <dd>(This input can be hidden and used to change the order server side)</dd> </dl></form><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->