<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>可以编辑的下拉列表框实现 - 分享JavaScript</title> <style type="text/css"> .selectBoxArrow{ margin-top:1px; float:left; position:absolute; right:1px; } .selectBoxInput{ border:0px; padding-left:1px; height:16px; position:absolute; top:0px; left:0px; } .selectBox{ border:1px solid #7f9db9; height:20px; } .selectBoxOptionContainer{ position:absolute; border:1px solid #7f9db9; height:100px; background-color:#FFF; left:-1px; top:20px; visibility:hidden; overflow:auto; } .selectBoxAnOption{ font-family:arial; font-size:12px; cursor:default; margin:1px; overflow:hidden; white-space:nowrap; } .selectBoxIframe{ position:absolute; background-color:#FFF; border:0px; z-index:999; } </style> <script type="text/javascript"> /************************************************************************************************************ Editable select Copyright (C) September 2005 DTHMLGoodies.com, Alf Magne Kalleland This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA Dhtmlgoodies.com., hereby disclaims all copyright interest in this script written by Alf Magne Kalleland. Alf Magne Kalleland, 2006 Owner of DHTMLgoodies.com ************************************************************************************************************/ // Path to arrow images var arrowImage = 'images/select_arrow.gif'; // Regular arrow var arrowImageOver = 'images/select_arrow_over.gif'; // Mouse over var arrowImageDown = 'images/select_arrow_down.gif'; // Mouse down var selectBoxIds = 0; var currentlyOpenedOptionBox = false; var editableSelect_activeArrow = false; function selectBox_switchImageUrl() { if(this.src.indexOf(arrowImage)>=0){ this.src = this.src.replace(arrowImage,arrowImageOver); }else{ this.src = this.src.replace(arrowImageOver,arrowImage); } } function selectBox_showOptions() { if(editableSelect_activeArrow && editableSelect_activeArrow!=this){ editableSelect_activeArrow.src = arrowImage; } editableSelect_activeArrow = this; var numId = this.id.replace(/[^d]/g,''); var optionDiv = document.getElementById('selectBoxOptions' + numId); if(optionDiv.style.display=='block'){ optionDiv.style.display='none'; if(navigator.userAgent.indexOf('MSIE')>=0)document.getElementById('selectBoxIframe' + numId).style.display='none'; this.src = arrowImageOver; }else{ optionDiv.style.display='block'; if(navigator.userAgent.indexOf('MSIE')>=0)document.getElementById('selectBoxIframe' + numId).style.display='block'; this.src = arrowImageDown; if(currentlyOpenedOptionBox && currentlyOpenedOptionBox!=optionDiv)currentlyOpenedOptionBox.style.display='none'; currentlyOpenedOptionBox= optionDiv; } } function selectOptionValue() { var parentNode = this.parentNode.parentNode; var textInput = parentNode.getElementsByTagName('INPUT')[0]; textInput.value = this.innerHTML; this.parentNode.style.display='none'; document.getElementById('arrowSelectBox' + parentNode.id.replace(/[^d]/g,'')).src = arrowImageOver; if(navigator.userAgent.indexOf('MSIE')>=0)document.getElementById('selectBoxIframe' + parentNode.id.replace(/[^d]/g,'')).style.display='none'; } var activeOption; function highlightSelectBoxOption() { if(this.style.backgroundColor=='#316AC5'){ this.style.backgroundColor=''; this.style.color=''; }else{ this.style.backgroundColor='#316AC5'; this.style.color='#FFF'; } if(activeOption){ activeOption.style.backgroundColor=''; activeOption.style.color=''; } activeOption = this; } function createEditableSelect(dest) { dest.className='selectBoxInput'; var div = document.createElement('DIV'); div.style.styleFloat = 'left'; div.style.width = dest.offsetWidth + 16 + 'px'; div.style.position = 'relative'; div.id = 'selectBox' + selectBoxIds; var parent = dest.parentNode; parent.insertBefore(div,dest); div.appendChild(dest); div.className='selectBox'; div.style.zIndex = 10000 - selectBoxIds; var img = document.createElement('IMG'); img.src = arrowImage; img.className = 'selectBoxArrow'; img.onmouseover = selectBox_switchImageUrl; img.onmouseout = selectBox_switchImageUrl; img.onclick = selectBox_showOptions; img.id = 'arrowSelectBox' + selectBoxIds; div.appendChild(img); var optionDiv = document.createElement('DIV'); optionDiv.id = 'selectBoxOptions' + selectBoxIds; optionDiv.className='selectBoxOptionContainer'; optionDiv.style.width = div.offsetWidth-2 + 'px'; div.appendChild(optionDiv); if(navigator.userAgent.indexOf('MSIE')>=0){ var iframe = document.createElement('<IFRAME src="about:blank" frameborder=0>'); iframe.style.width = optionDiv.style.width; iframe.style.height = optionDiv.offsetHeight + 'px'; iframe.style.display='none'; iframe.id = 'selectBoxIframe' + selectBoxIds; div.appendChild(iframe); } if(dest.getAttribute('selectBoxOptions')){ var options = dest.getAttribute('selectBoxOptions').split(';'); var optionsTotalHeight = 0; var optionArray = new Array(); for(var no=0;no<options.length;no++){ var anOption = document.createElement('DIV'); anOption.innerHTML = options[no]; anOption.className='selectBoxAnOption'; anOption.onclick = selectOptionValue; anOption.style.width = optionDiv.style.width.replace('px','') - 2 + 'px'; anOption.onmouseover = highlightSelectBoxOption; optionDiv.appendChild(anOption); optionsTotalHeight = optionsTotalHeight + anOption.offsetHeight; optionArray.push(anOption); } if(optionsTotalHeight > optionDiv.offsetHeight){ for(var no=0;no<optionArray.length;no++){ optionArray[no].style.width = optionDiv.style.width.replace('px','') - 22 + 'px'; } } optionDiv.style.display='none'; optionDiv.style.visibility='visible'; } selectBoxIds = selectBoxIds + 1; } </script> </head> <body> <form> <table border="0"> <tr> <td>Where do you come from?</td> <td><input type="text" name="myText" value="Norway" selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico;Norway;Sweden;United Kingdom;United States"></td> </tr> <tr> <td>What is your name?</td> <td><input type="text" name="myText2" value="" selectBoxOptions="Amy;Andrew;Carol;Jennifer;Jim;Tim;Tommy;Vince"></td> </tr> </table> <p>I.e.: A combination of text- and selectbox. You can type in a value or choose from the list</p> </form> <script type="text/javascript"> createEditableSelect(document.forms[0].myText); createEditableSelect(document.forms[0].myText2); </script> </body> </html>