Version complète: jsB@nk » Form » Dropdown » Sélectionnez Boîte avec Options
URL: https://www.javascriptbank.com/select-box-with-options.html
Utilisez cette JavaScript de changer facilement l'ordre des options dans un sélectionnez la case. Vous pouvez voir le changement afin que cela se passe dans la boîte de "New Order". (Les données peuvent être cachées et utilisé pour modifier l'ordre sur le serveur.)
Version complète: jsB@nk » Form » Dropdown » Sélectionnez Boîte avec 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-->