Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Hộp chọn với tham số
URL: https://www.javascriptbank.com/select-box-with-options.html
Bạn có thể sử dụng đoạn mã JavaScript này để tạo một đối tượng select với các nút cho việc thay đổi thứ tự các mục chọn.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Hộp chọn với tham số
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-->