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 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;
}