Select.htm
<select style="behavior:url('Select.htc');"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select>
Select.htc
<public:attach event=oncontentready onevent=initSelect()> <script> function initSelect() { // element.style.display="none"; //模拟组合框 vComboxDiv=document.createElement("div"); vOptionInput=document.createElement("input"); vOptionInput.style.border="1px solid #000000"; vOptionInput.style.width=element.offsetWidth+50; vOptionInput.value=element.options[element.selectedIndex].text; vComboxDiv.appendChild(vOptionInput); vOptionInput.attachEvent("onblur",onOptionInputBlur); vComboxInput=document.createElement("input"); vComboxInput.style.border="1px solid #000000"; vComboxInput.style.borderWidth="1 1 1 0"; vComboxInput.type="text"; vComboxInput.style.backgroundColor="buttonface"; vComboxInput.style.font="normal 11pt Marlett"; vComboxInput.value="6"; vComboxInput.readOnly=true; vComboxInput.style.width=20; vComboxDiv.appendChild(vComboxInput); vComboxInput.attachEvent("onclick",onComboxInputClick); window.document.body.insertAdjacentElement("afterbegin",vComboxDiv); vComboxDiv.style.position="absolute"; vComboxDiv.style.left=getElementDefineLeft(element); vComboxDiv.style.top=getElementDefineTop(element); //模拟列表框 vListDiv=document.createElement("div"); vListDiv.style.display="none"; vListDiv.style.border="1px solid #000000"; vListDiv.style.width=vComboxDiv.offsetWidth; vTable=document.createElement("table"); vTable.border="0"; vTable.cellSpacing="0"; vTable.cellPadding="0"; vTable.width="100%"; for(kIndex=0;kIndex<element.length;kIndex++) { var vTr=vTable.insertRow(kIndex); var vTd=vTr.insertCell(0); vTd.style.font="normal 9pt 宋体"; vTd.style.backgroundColor="#FFFFFF"; vTd.innerHTML=element.options[kIndex].text; vTd.attachEvent("onmousedown",onListMouseDown); vTd.attachEvent("onmouseover",onListMouseOver); vTd.attachEvent("onmouseout",onListMouseOut); } vListDiv.appendChild(vTable); window.document.body.insertAdjacentElement("afterbegin",vListDiv); vListDiv.style.position="absolute"; vListDiv.style.left=getElementDefineLeft(element); vListDiv.style.top=getElementDefineTop(element)+vOptionInput.offsetHeight; // } //鼠标丢失焦点组合框 function onOptionInputBlur() { if(!isSelectOption(element,window.event.srcElement.value)) { element.length=element.length+1; element.options[element.length-1].text=window.event.srcElement.value; } } //鼠标按下组合框 function onComboxInputClick() { vListDiv.style.display=""; for(iRowCount=vTable.rows.length-1;iRowCount>=0;iRowCount--) { vTable.deleteRow(iRowCount); } for(kIndex=0;kIndex<element.length;kIndex++) { var vTr=vTable.insertRow(kIndex); var vTd=vTr.insertCell(0); vTd.style.font="normal 9pt 宋体"; vTd.style.backgroundColor="#FFFFFF"; vTd.innerHTML=element.options[kIndex].text; vTd.attachEvent("onmousedown",onListMouseDown); vTd.attachEvent("onmouseover",onListMouseOver); vTd.attachEvent("onmouseout",onListMouseOut); } element.document.attachEvent('onmousedown',onDocumentMouseDown); } //鼠标按下列表框项目 function onListMouseDown() { element.options[window.event.srcElement.parentElement.rowIndex].value=window.event.srcElement.innerHTML; vOptionInput.value=window.event.srcElement.innerHTML; vListDiv.style.display="none"; element.document.detachEvent("onmousedown",onDocumentMouseDown); } //鼠标移至列表框项目 function onListMouseOver() { window.event.srcElement.style.backgroundColor="#336699"; } //鼠标移出列表框项目 function onListMouseOut() { window.event.srcElement.style.backgroundColor="#FFFFFF"; } //文档中鼠标按下[隐藏列表框] function onDocumentMouseDown() { if(vListDiv.contains(event.srcElement)) { return; } vListDiv.style.display="none"; element.document.detachEvent("onmousedown",onDocumentMouseDown); } //通用库函数 //取元素绝对位置Left function getElementDefineLeft(vObject) { var iElementLeft=vObject.offsetLeft; while(vObject=vObject.offsetParent) { iElementLeft+=vObject.offsetLeft; } return iElementLeft; } //取元素绝对位置Top function getElementDefineTop(vObject) { var iElementTop=vObject.offsetTop; while(vObject=vObject.offsetParent) { iElementTop+=vObject.offsetTop; } return iElementTop; } //判断是否是列表子项 function isSelectOption(vObject,strOption) { var bIsOption=false; for(kIndex=0;kIndex<vObject.length;kIndex++) { if(vObject.options[kIndex].text==strOption) { bIsOption=true; } } return bIsOption; } </script> </public:attach> 
|