Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Thêm bớt tùy chọn
URL: https://www.javascriptbank.com/picklist-script.html
Hiệu ứng tạo hai danh sách chọn trên trang web, người dùng có thể di chuyển qua lại các tùy chọn trên hai danh sách này với nhau. Hiệu ứng cũng cho phép di chuyển nhiều tùy biến cùng một lúc đồng thời chúng sẽ được sắp xếp theo thứ tự Alpha-Beta sau khi được di chuyển.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Thêm bớt tùy chọn
URL: https://www.javascriptbank.com/picklist-script.html
<script LANGUAGE="JavaScript"><!--// PickList script- By Sean Geraty (http://www.freewebs.com/sean_geraty/)// Control flags for list selection and sort sequence// Sequence is on option value (first 2 chars - can be stripped off in form processing)// It is assumed that the select list is in sort sequence initiallyvar singleSelect = true; // Allows an item to be selected once onlyvar sortSelect = true; // Only effective if above flag set to truevar sortPick = true; // Will order the picklist in sort sequence// Initialise - invoked on loadfunction initIt() { var selectList = document.getElementById("SelectList"); var selectOptions = selectList.options; var selectIndex = selectList.selectedIndex; var pickList = document.getElementById("PickList"); var pickOptions = pickList.options; pickOptions[0] = null; // Remove initial entry from picklist (was only used to set default width) if (!(selectIndex > -1)) { selectOptions[0].selected = true; // Set first selected on load selectOptions[0].defaultSelected = true; // In case of reset/reload } selectList.focus(); // Set focus on the selectlist}// Adds a selected item into the picklistfunction addIt() { var selectList = document.getElementById("SelectList"); var selectIndex = selectList.selectedIndex; var selectOptions = selectList.options; var pickList = document.getElementById("PickList"); var pickOptions = pickList.options; var pickOLength = pickOptions.length; // An item must be selected while (selectIndex > -1) { pickOptions[pickOLength] = new Option(selectList[selectIndex].text); pickOptions[pickOLength].value = selectList[selectIndex].value; // If single selection, remove the item from the select list if (singleSelect) { selectOptions[selectIndex] = null; } if (sortPick) { var tempText; var tempValue; // Sort the pick list while (pickOLength > 0 && pickOptions[pickOLength].value < pickOptions[pickOLength-1].value) { tempText = pickOptions[pickOLength-1].text; tempValue = pickOptions[pickOLength-1].value; pickOptions[pickOLength-1].text = pickOptions[pickOLength].text; pickOptions[pickOLength-1].value = pickOptions[pickOLength].value; pickOptions[pickOLength].text = tempText; pickOptions[pickOLength].value = tempValue; pickOLength = pickOLength - 1; } } selectIndex = selectList.selectedIndex; pickOLength = pickOptions.length; } selectOptions[0].selected = true;}// Deletes an item from the picklistfunction delIt() { var selectList = document.getElementById("SelectList"); var selectOptions = selectList.options; var selectOLength = selectOptions.length; var pickList = document.getElementById("PickList"); var pickIndex = pickList.selectedIndex; var pickOptions = pickList.options; while (pickIndex > -1) { // If single selection, replace the item in the select list if (singleSelect) { selectOptions[selectOLength] = new Option(pickList[pickIndex].text); selectOptions[selectOLength].value = pickList[pickIndex].value; } pickOptions[pickIndex] = null; if (singleSelect && sortSelect) { var tempText; var tempValue; // Re-sort the select list while (selectOLength > 0 && selectOptions[selectOLength].value < selectOptions[selectOLength-1].value) { tempText = selectOptions[selectOLength-1].text; tempValue = selectOptions[selectOLength-1].value; selectOptions[selectOLength-1].text = selectOptions[selectOLength].text; selectOptions[selectOLength-1].value = selectOptions[selectOLength].value; selectOptions[selectOLength].text = tempText; selectOptions[selectOLength].value = tempValue; selectOLength = selectOLength - 1; } } pickIndex = pickList.selectedIndex; selectOLength = selectOptions.length; }}// Selection - invoked on submitfunction selIt(btn) { var pickList = document.getElementById("PickList"); var pickOptions = pickList.options; var pickOLength = pickOptions.length; if (pickOLength < 1) { alert("No Selections in the Picklist\nPlease Select using the [->] button"); return false; } for (var i = 0; i < pickOLength; i++) { pickOptions[i].selected = true; } return true;}//--></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onLoad="initIt();"><form NAME="theform" ID="theform" ACTION="whatever" onSubmit="return selIt();"><table><tr><td><select NAME="SelectList" ID="SelectList" SIZE="5" multiple="multiple" style="width: 150px"><option VALUE="01sel">Selection 01</option><option VALUE="02sel">Selection 02</option><option VALUE="03sel">Selection 03</option><option VALUE="04sel">Selection 04</option><option VALUE="05sel">Selection 05</option><option VALUE="06sel">Selection 06</option><option VALUE="07sel">Selection 07</option><option VALUE="08sel">Selection 08</option><option VALUE="09sel">Selection 09</option><option VALUE="10sel">Selection 10</option></select></td><td><input TYPE="BUTTON" VALUE="->" ONCLICK="addIt();"></input><br><input TYPE="BUTTON" VALUE="<-" ONCLICK="delIt();"></input></td><td><select NAME="PickList" ID="PickList" SIZE="5" multiple="multiple" style="width: 150px"><option VALUE="01sel">Selection 01</option></select></td></tr><tr><td ALIGN="left"><input TYPE="reset" VALUE="Reset" ONCLICK="javascript: window.location.href = 'picklist.html'"></td><td></td><td ALIGN="right"><input TYPE="submit" VALUE="Submit"></td></tr></table></form></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->