脚本宝典收集整理的这篇文章主要介绍了js實例教程-javascript代碼實現可編輯下拉框，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小寶典致力於為廣大程序猿（媛）提供高品質的代碼服務，請大家多多光顧小站，小寶典在此謝過。
javascript之可編輯下拉框
HTML里的select box只能下拉選擇，是不可以編輯的，本範例實現了一個既可以編輯又可以下拉的select box，在很多項目中能夠用到。
看看效果圖：
如圖可以實現編輯下拉框，實現既有文本框功能又有下拉框功能。
就是input控件基礎上添加可選項
<input tyPE="text" name=";myText" value="Norway" selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico;Norway;Sweden;UnITed Kingdom;United states">
js實現：
function createEditableSelect(dest) { dest.classname='selectBoxInput'; VAR p = document.createElement('DIV'); p.style.styleFloat = 'left'; p.style.width = dest.offsetWidth + 16 + 'px'; p.style.position = 'relative'; p.id = 'selectBox' + selectBoxIds; var parent = dest.parentNode; parent.insertBefore(p,dest); p.appendChild(dest); p.className='selectBox'; p.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; p.appendChild(img); var optionDiv = document.createElement('DIV'); optionDiv.id = 'selectBoxOptions' + selectBoxIds; optionDiv.className='selectBoxOptionContainer'; optionDiv.style.width = p.offsetWidth-2 + 'px'; p.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; p.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; } javascript之可編輯下拉框
HTML里的select box只能下拉選擇，是不可以編輯的，本範例實現了一個既可以編輯又可以下拉的select box，在很多項目中能夠用到。
看看效果圖：
如圖可以實現編輯下拉框，實現既有文本框功能又有下拉框功能。
就是input控件基礎上添加可選項
<input type="text" name="myText" value="Norway" selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico;Norway;Sweden;United Kingdom;United States">
js實現：
function createEditableSelect(dest) { dest.className='selectBoxInput'; var p = document.createElement('DIV'); p.style.styleFloat = 'left'; p.style.width = dest.offsetWidth + 16 + 'px'; p.style.position = 'relative'; p.id = 'selectBox' + selectBoxIds; var parent = dest.parentNode; parent.insertBefore(p,dest); p.appendChild(dest); p.className='selectBox'; p.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; p.appendChild(img); var optionDiv = document.createElement('DIV'); optionDiv.id = 'selectBoxOptions' + selectBoxIds; optionDiv.className='selectBoxOptionContainer'; optionDiv.style.width = p.offsetWidth-2 + 'px'; p.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; p.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; } 覺得可用，就經常來吧！Javascript技巧 腳本寶典 歡迎評論哦！ js技巧，巧奪天工，精雕玉琢。小寶典獻醜了！
以上是脚本宝典为你收集整理的js實例教程-javascript代碼實現可編輯下拉框全部内容，希望文章能够帮你解决js實例教程-javascript代碼實現可編輯下拉框所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。