»
AnglaisFranaisVietnamien

Imprimer - Sélectionnez Boîte avec Options - JavaScriptBank.com

Version complte: jsB@nk » Form » Dropdown » Sélectionnez Boîte avec Options
URL: http://www.javascriptbank.com/select-box-with-options.html

Sélectionnez Boîte avec Options © JavaScriptBank.comUtilisez 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 complte: jsB@nk » Form » Dropdown » Sélectionnez Boîte avec Options
URL: http://www.javascriptbank.com/select-box-with-options.html



JavaScript
<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-->


HTML
<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-->