Editable Select Box Javascript

Javascripts > Javascript Forms > Editable Select Box

Script Title: Editable Select Box

Description: With the Editable Selectbox control, you can add, edit, delete, and even sort the options in a selectbox. Upon submission, it not only sends the selected item, but also all the other items in the order they appear, encoded in a hidden field.

Example: Available

Copy the following code into your <HEAD></HEAD> tags.

<script language="JavaScript1.3"> //================================================================ // // Product: Editable Select Box Control // Author: Justin Greenwood // Version: 1.0 // Browsers: Internet Explorer 5+ // // Revision History: // 2001/01/29 - Version 1.0 Released // // Support: // http://support.punktech.com/ // support@punktech.com // //================================================================ // // Object: // editableSelectBox - The Editable Select Box Control Object. // // Constructor Parameters: // strID - The ID & Name that identifies the control for validation and HTTP submission // strClass - the name of a CSS class to apply to the control. // strWidth - width in pixels or percentage. Examples: "90%", "250px" // intRows - 1 for ComboBox Mode, 3 or more for ListBox Mode // strAlign - The alignment of the TABLE containing the control. (The control is embedded in a TABLE.) // boolShowEditButtons - If this is true, the Add, Edit, and Delete buttons will be displayed. // boolShowSortButtons - If this is true, the Sort-Up, Sort-Down, and Alphabetize buttons will be displayed. // // Methods: // addOption(strValue, strText, boolIsSelected) - Add's an option to the option list. // sort() - Sorts the options in the control. // setButtonSort(strText) - Sorts the options in the control. // setButtonSortUp(strText) - Sorts the options in the control. // setButtonSortDown(strText) - Sorts the options in the control. // setButtonAdd(strText) - Sorts the options in the control. // setButtonEdit(strText) - Sorts the options in the control. // setButtonDelete(strText) - Sorts the options in the control. // // Properties: // deleteMessage - The message that pops up in a confirm box when you delete. // defaultOptionValue - The default value of an Option when you add it. // defaultOptionText - The default text of an Option when you add it. // sortKeyCode - The key code used to sort all Options alphabetically. // sortUpKeyCode - The key code used to sort the selected Option up. // sortDownKeyCode - The key code used to sort the selected Option down. // addKeyCode - The key code used to add an Option. // editKeyCode - The key code used to edit an Option. // deleteKeyCode - The key code used to delete an Option. // // Example 1: // var objEditable = new editableSelectBox("locationId", "cssGreenControls", "300px", 4, "left", true, false); // objEditable.setButtonAdd("Add City"); // objEditable.setButtonEdit("Modify City"); // objEditable.setButtonDelete("Remove City"); // objEditable.addOption(1, "Indianapolis, IN"); // objEditable.addOption(2, "Memphis, TN"); // objEditable.addOption(3, "New York, NY"); // objEditable.sort(); // // Example 2: // var objEditable = new editableSelectBox("locationId", null, "90%", 1, null, false, false); // objEditable.addOption(1, "Indianapolis, IN"); // objEditable.addOption(2, "Memphis, TN"); // objEditable.addOption(3, "New York, NY"); // //================================================================ var collection__EditableSelect = new Array(); function editableSelectBox(strID, strClass, strWidth, intRows, strAlign, boolShowEditButtons, boolShowSortButtons) { // Private properties and methods this.c_id = strID; this.c_class = (strClass == "" ? null : strClass); this.c_width = ((strWidth == "" || strWidth == null) ? "250px" : strWidth); this.c_rows = ((intRows == "" || intRows == null) ? 1 : intRows); this.c_align = (strAlign == "" ? null : strAlign); this.c_isPercentage = (this.c_width.charAt(this.c_width.length - 1) == '%'); this.c_options = new Array(); this.c_showEditButtons = (boolShowEditButtons == null ? true : boolShowEditButtons); this.c_showSortButtons = (boolShowSortButtons == null ? false : boolShowSortButtons); this.c_sortUpButtonText = "Up"; this.c_sortDownButtonText = "Down"; this.c_sortButtonText = "Sort"; this.c_deleteButtonText = "Delete"; this.c_addButtonText = "Add"; this.c_editButtonText = "Edit"; this.c_buttonAdd = null; this.c_buttonEdit = null; this.c_buttonDelete = null; this.c_buttonSortAlpha = null; this.c_buttonSortUp = null; this.c_buttonSortDown = null; this.c_selectBox = null; this.c_hiddenOptions = null; this.c_textBoxText = null; this.c_textBoxValue = null; this.c_render = editableSelectBox_Render; // Public properties and methods this.deleteMessage = "Are you sure you want to delete this option?"; this.defaultOptionValue = "<VALUE>"; this.defaultOptionText = "<TEXT>"; this.sortKeyCode = 106; // 106 Keypad* this.sortUpKeyCode = 109; // 109 Keypad- this.sortDownKeyCode = 107; // 107 Keypad+ this.addKeyCode = 45; // 45 insert this.editKeyCode = 32; // 32 space this.deleteKeyCode = 46; // 46 delete this.setButtonSort = editableSelectBox_setButtonSort; this.setButtonSortUp = editableSelectBox_setButtonSortUp; this.setButtonSortDown = editableSelectBox_setButtonSortDown; this.setButtonAdd = editableSelectBox_setButtonAdd; this.setButtonEdit = editableSelectBox_setButtonEdit; this.setButtonDelete = editableSelectBox_setButtonDelete; this.addOption = editableSelectBox_AddOption; this.sort = editableSelectBox_Sort; this.serialize = editableSelectBox_Serialize; this.c_render(); collection__EditableSelect[strID] = this; } function editableSelectBox_setButtonSort(strText) { if (this.c_buttonSortAlpha != null) this.c_buttonSortAlpha.value = strText; } function editableSelectBox_setButtonSortUp(strText) { if (this.c_buttonSortUp != null) this.c_buttonSortUp.value = strText; } function editableSelectBox_setButtonSortDown(strText) { if (this.c_buttonSortDown != null) this.c_buttonSortDown.value = strText; } function editableSelectBox_setButtonAdd(strText) { if (this.c_buttonAdd != null) this.c_buttonAdd.value = strText; } function editableSelectBox_setButtonEdit(strText) { if (this.c_buttonEdit != null) this.c_buttonEdit.value = strText; } function editableSelectBox_setButtonDelete(strText) { if (this.c_buttonDelete != null) this.c_buttonDelete.value = strText; } function editableSelectBox_AddOption(strValue, strText, boolSelected) { var objSelect = document.getElementById(this.c_id); var objOption = document.createElement("OPTION"); objOption.text = strText; objOption.value = strValue; objOption.selected = boolSelected; objSelect.options.add(objOption); this.serialize(); } function editableSelectBox_Sort() { sortSelectBox(this.c_id); this.serialize(); } function editableSelectBox_Serialize() { serializeSelectBox(this.c_id, this.c_id + "__options"); } function editableSelectBox_Render() { document.write("<table" + (this.c_align == null ? "" : (" align=" + this.c_align)) + " cellspacing=0 cellpadding=0 border=0 width=\"" + this.c_width + "\" id=\"" + this.c_id + "__container\">"); if (this.c_showEditButtons || this.c_showSortButtons) { document.write("<tr><td align=right colspan=2>"); } if (this.c_showSortButtons) { document.write("<input id=\"" + this.c_id + "__sortup\" type=button value=\"" + this.c_sortUpButtonText + "\" onclick=\"sortItem('" + this.c_id + "', true)\">"); document.write("<input id=\"" + this.c_id + "__sortdown\" type=button value=\"" + this.c_sortDownButtonText + "\" onclick=\"sortItem('" + this.c_id + "', false)\">"); document.write("<input id=\"" + this.c_id + "__sortalpha\" type=button value=\"" + this.c_sortButtonText + "\" onclick=\"sortItems('" + this.c_id + "')\">"); } if (this.c_showEditButtons) { document.write("<input id=\"" + this.c_id + "__add\" type=button value=\"" + this.c_addButtonText + "\" onclick=\"addItem('" + this.c_id + "')\">"); document.write("<input id=\"" + this.c_id + "__edit\" type=button value=\"" + this.c_editButtonText + "\" onclick=\"editItem('" + this.c_id + "', false)\">"); document.write("<input id=\"" + this.c_id + "__delete\" type=button value=\"" + this.c_deleteButtonText + "\" onclick=\"deleteItem('" + this.c_id + "')\">"); } if (this.c_showEditButtons || this.c_showSortButtons) { document.write("</td></tr>"); } document.write("<tr><td width=\"40%\">"); document.write("<input id=\"" + this.c_id + "__value\" type=text value=\"\" style=\"display:none;width:100%;\"" + (this.c_class == null ? "" : (" class=\"" + this.c_class + "\""))); document.write(" title=\"\" onkeyup=\"tryFocusOnSelect('" + this.c_id + "');\" onkeydown=\"tryFocusOnSelect('" + this.c_id + "')\">"); document.write("</td><td width=\"60%\">"); document.write("<input id=\"" + this.c_id + "__text\" type=text value=\"\" style=\"display:none;width:100%;\"" + (this.c_class == null ? "" : (" class=\"" + this.c_class + "\""))); document.write(" title=\"\" onkeyup=\"tryFocusOnSelect('" + this.c_id + "');\" onkeydown=\"tryFocusOnSelect('" + this.c_id + "')\">"); document.write("</td></tr><tr><td colspan=2>"); document.write("<select name=\"" + this.c_id + "\" id=\"" + this.c_id + "\"" + (this.c_class == null ? "" : (" class=\"" + this.c_class + "\"")) + " title=\"\" "); document.write("size=\"" + this.c_rows + "\" style=\"display:block;width:100%;\" onkeyup=\"catchKeyPress('" + this.c_id + "');\" onfocus=\"focusOnSelect('" + this.c_id + "');\">"); document.write("</select>"); document.write("<input type=\"hidden\" name=\"" + this.c_id + "__options\" id=\"" + this.c_id + "__options\" value=\"\">"); document.write("</td></tr>"); document.write("</table>"); if (this.c_showEditButtons) { this.c_buttonAdd = document.getElementById(this.c_id + "__add"); this.c_buttonEdit = document.getElementById(this.c_id + "__edit"); this.c_buttonDelete = document.getElementById(this.c_id + "__delete"); } if (this.c_showSortButtons) { this.c_buttonSortAlpha = document.getElementById(this.c_id + "__sortalpha"); this.c_buttonSortUp = document.getElementById(this.c_id + "__sortup"); this.c_buttonSortDown = document.getElementById(this.c_id + "__sortdown"); } this.c_selectBox = document.getElementById(this.c_id); this.c_hiddenOptions = document.getElementById(this.c_id + "__options"); this.c_textBoxText = document.getElementById(this.c_id + "__text"); this.c_textBoxValue = document.getElementById(this.c_id + "__value"); } function sortSelectBox(controlId) { var objSelect = (typeof(controlId) == "string" ? document.getElementById(controlId) : controlId); var intCount = objSelect.options.length; var intLeast; var strTmpText, strTmpValue, boolTmpSelected; for (var i = 0; i < intCount - 1; i++) { intLeast = i; for (var j = i + 1; j < intCount; j++) { if (objSelect.options[intLeast].text > objSelect.options[j].text) intLeast = j; } if (intLeast != i) { strTmpText = objSelect.options[intLeast].text; strTmpValue = objSelect.options[intLeast].value; boolTmpSelected = objSelect.options[intLeast].selected; objSelect.options[intLeast].text = objSelect.options[i].text; objSelect.options[intLeast].value = objSelect.options[i].value; objSelect.options[intLeast].selected = objSelect.options[i].selected; objSelect.options[i].text = strTmpText; objSelect.options[i].value = strTmpValue; objSelect.options[i].selected = boolTmpSelected; } } } function serializeSelectBox(sourceControlId, targetControlId) { var selectbox = (typeof(sourceControlId) == "string" ? document.getElementById(sourceControlId) : sourceControlId); var targetControl = (typeof(targetControlId) == "string" ? document.getElementById(targetControlId) : targetControlId); var count = selectbox.options.length; var itemValue; var itemText; var serializedString = ""; targetControl.value = ""; for (var i = 0; i < count; i++) { itemValue = escape(selectbox.options[i].value); itemText = escape(selectbox.options[i].text); serializedString += itemValue + "," + itemText + ";"; } targetControl.value = serializedString; } function sortItems(controlId) { var objEditableSelect = collection__EditableSelect[controlId]; var objSelect = objEditableSelect.c_selectBox; var objHiddenOptions = objEditableSelect.c_hiddenOptions; sortSelectBox(objSelect); serializeSelectBox(objSelect, objHiddenOptions); } function editItem(controlId, bSelectAll) { var objEditableSelect = collection__EditableSelect[controlId]; var objSelect = objEditableSelect.c_selectBox; var objInputText = objEditableSelect.c_textBoxText; var objInputValue = objEditableSelect.c_textBoxValue; if (objSelect.selectedIndex >= 0) { objInputText.style.display = "block"; objInputValue.style.display = "block"; if (parseInt(objSelect.size) > 2) objSelect.size = "" + (parseInt(objSelect.size) - 1); else objSelect.style.display = "none"; objInputText.value = objSelect.options[objSelect.selectedIndex].text; objInputValue.value = objSelect.options[objSelect.selectedIndex].value; objInputText.focus(); if (bSelectAll) { var txtRange = objInputValue.createTextRange(); txtRange.moveStart("character", 0); txtRange.select(); } else { var txtRange = objInputText.createTextRange(); txtRange.moveStart("character", objInputText.value.length); txtRange.select(); } } } function deleteItem(controlId) { var objEditableSelect = collection__EditableSelect[controlId]; var objSelect = objEditableSelect.c_selectBox; var objHiddenOptions = objEditableSelect.c_hiddenOptions; if (objSelect.selectedIndex >= 0) { if (confirm(unescape(objEditableSelect.deleteMessage))) { objSelect.options.remove(objSelect.selectedIndex); serializeSelectBox(objSelect, objHiddenOptions); } } } function addItem(controlId) { var objEditableSelect = collection__EditableSelect[controlId]; var objSelect = objEditableSelect.c_selectBox; var newOption = document.createElement("OPTION"); newOption.text = unescape(objEditableSelect.defaultOptionText); newOption.value = unescape(objEditableSelect.defaultOptionValue); objSelect.options.add(newOption); objSelect.selectedIndex = newOption.index; editItem(controlId, true); } function sortItem(controlId, sortUp) { var objEditableSelect = collection__EditableSelect[controlId]; var objSelect = objEditableSelect.c_selectBox; var objHiddenOptions = objEditableSelect.c_hiddenOptions; var numberToAdd = (sortUp ? -1 : 1); if ((sortUp && objSelect.selectedIndex > 0) || (!sortUp && objSelect.selectedIndex + 1 < objSelect.options.length)) { var tmpText = objSelect.options[objSelect.selectedIndex].text; var tmpValue = objSelect.options[objSelect.selectedIndex].value; objSelect.options[objSelect.selectedIndex].text = objSelect.options[objSelect.selectedIndex + numberToAdd].text; objSelect.options[objSelect.selectedIndex].value = objSelect.options[objSelect.selectedIndex + numberToAdd].value; objSelect.options[objSelect.selectedIndex + numberToAdd].text = tmpText; objSelect.options[objSelect.selectedIndex + numberToAdd].value = tmpValue; objSelect.selectedIndex = objSelect.selectedIndex + numberToAdd; serializeSelectBox(objSelect, objHiddenOptions); } } function tryFocusOnSelect(controlId) { if (event.keyCode == 13 || (event.keyCode == 40 && !event.shiftKey) || (event.keyCode == 38 && !event.shiftKey)) { focusOnSelect(controlId); return; } else if (event.keyCode < 0x2f && event.keyCode != 32) { return; } } function focusOnSelect(controlId) { var objEditableSelect = collection__EditableSelect[controlId]; var objSelect = objEditableSelect.c_selectBox; var objHiddenOptions = objEditableSelect.c_hiddenOptions; var objInputText = objEditableSelect.c_textBoxText; var objInputValue = objEditableSelect.c_textBoxValue; if (objInputText.style.display == "block") { objInputText.style.display = "none"; objInputValue.style.display = "none"; objSelect.options[objSelect.selectedIndex].text = objInputText.value; objSelect.options[objSelect.selectedIndex].value = objInputValue.value; if (parseInt(objSelect.size) > 1) objSelect.size = "" + (parseInt(objSelect.size) + 1); else objSelect.style.display = "block"; serializeSelectBox(objSelect, objHiddenOptions); objSelect.focus(); // This line errors in IE5 for some reason if (typeof(objSelect.fireEvent) == "function") objSelect.fireEvent('onchange'); } } function catchKeyPress(controlId, deleteMessage, defaultValue, defaultText) { var objEditableSelect = collection__EditableSelect[controlId]; if (event.keyCode == objEditableSelect.deleteKeyCode) { deleteItem(controlId); } else if (event.keyCode == objEditableSelect.addKeyCode) { addItem(controlId); } else if (event.keyCode == objEditableSelect.editKeyCode) { editItem(controlId, false); } else if (event.keyCode == objEditableSelect.sortUpKeyCode) { sortItem(controlId, true); } else if (event.keyCode == objEditableSelect.sortDownKeyCode) { sortItem(controlId, false); } else if (event.keyCode == objEditableSelect.sortKeyCode) { sortItems(controlId); } } </script>

Copy the following code between the <BODY></BODY> tags of your html page.

<script language="JavaScript1.3"> var object1 = new editableSelectBox("dd1", "", "75%", 8, null, true, false); object1.setButtonAdd("Add Name"); object1.setButtonEdit("Modify Name"); object1.setButtonDelete("Remove Name"); object1.addOption(1,"Justin Greenwood"); object1.addOption(2,"Mark Twain",true); object1.addOption(3,"Abraham Lincoln"); object1.addOption(4,"Joseph Smith"); object1.addOption(5,"Hal Eichorst"); object1.addOption(6,"Barry Bonds"); object1.addOption(7,"Jimmy Pratt"); object1.addOption(8,"Micheal Atkisson"); object1.addOption(9,"Kelly Greenwood"); object1.addOption(10,"Spencer Greenwood",true); object1.addOption(11,"Whitney Patterson"); object1.addOption(12,"Brad Thurber"); object1.addOption(13,"Santa Clause"); object1.addOption(14,"Humpty Dumpty"); object1.addOption(15,"Godzilla"); object1.addOption(16,"Captain Fantasitc"); object1.sort(); </script> <br> <script language="JavaScript1.3"> var object2 = new editableSelectBox("dd2", "", "400px", 6, null, false, true); object2.setButtonSort("Alphabetize"); object2.setButtonSortDown("Sort Down"); object2.setButtonSortUp("Sort Up"); object2.addOption(1,"Justin Greenwood"); object2.addOption(2,"Mark Twain",true); object2.addOption(3,"Abraham Lincoln"); object2.addOption(4,"Joseph Smith"); object2.addOption(5,"Hal Eichorst"); object2.addOption(6,"Barry Bonds"); object2.addOption(7,"Jimmy Pratt"); object2.addOption(8,"Micheal Atkisson"); object2.addOption(9,"Kelly Greenwood"); object2.addOption(10,"Spencer Greenwood",true); object2.addOption(11,"Whitney Patterson"); object2.addOption(12,"Brad Thurber"); object2.addOption(13,"Santa Clause"); object2.addOption(14,"Humpty Dumpty"); object2.addOption(15,"Godzilla"); object2.addOption(16,"Captain Fantasitc"); </script> <br> <script language="JavaScript1.3"> var object3 = new editableSelectBox("dd3", "", "400px", 5, null, false, false); object3.addOption(1,"Justin Greenwood"); object3.addOption(2,"Mark Twain",true); object3.addOption(3,"Abraham Lincoln"); object3.addOption(4,"Joseph Smith"); object3.addOption(5,"Hal Eichorst"); object3.addOption(6,"Barry Bonds"); object3.addOption(7,"Jimmy Pratt"); object3.addOption(8,"Micheal Atkisson"); object3.addOption(9,"Kelly Greenwood"); object3.addOption(10,"Spencer Greenwood",true); object3.addOption(11,"Whitney Patterson"); object3.addOption(12,"Brad Thurber"); object3.addOption(13,"Santa Clause"); object3.addOption(14,"Humpty Dumpty"); object3.addOption(15,"Godzilla"); object3.addOption(16,"Captain Fantasitc"); </script> <br> <script language="JavaScript1.3"> var object4 = new editableSelectBox("dd4", "", "300px", 1, null, true, true); object4.addOption(1,"Apple"); object4.addOption(2,"Banana",true); object4.addOption(3,"Lemon"); object4.addOption(4,"Lime"); object4.addOption(5,"Orange"); object4.addOption(6,"Tangerine"); object4.sort(); </script>

Enter your name and email address to have this script sent right to your Inbox for later viewing.

First Name Last Name Email

Graphxkingdom
Thousands of free Icons, Clipart & Themes!

Free-Backgrounds
Hundreds of eye-popping Backgrounds & Textures

Java-scripts.net
Cool and easy effects with cut-and-paste Javascripts!