檔案下載：38077089
<style>
.optionDiv { border:1px solid black;border-top:0px;position:absolute;visibility:hidden;}
.optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:160%;cursor:default;width:100%;}
</style>
<script type="text/javascript">
var optionDiv = document.createElement("div");
function createselectelements(obj,arr){
var oWhere = document.body;
//設置下拉式功能表選項的座標和寬度
with(optionDiv.style) {
var xy = getSelectPosition(obj);
pixelLeft = xy[0];
pixelTop = xy[1]+obj.offsetHeight;
width = obj.offsetWidth;
optionDiv.className = "optionDiv";
}
//下拉式功能表內容
var val1=obj.value;
var optionsindexs=0;
for(var i=optionDiv.childNodes.length;i>0;i--){
optionDiv.removeChild(optionDiv.childNodes[i-1]);
}
var Options = new Array();
for (var i=0;i<arr.length;i++) {
if(arr[i].indexOf(val1)==0){
Options[optionsindexs] = optionDiv.appendChild(document.createElement("div"));
Options[optionsindexs].innerText= arr[i];
optionsindexs++;
}
}
//移動Option時的動態效果
for (i=0;i<Options.length;i++) {
Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});
Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});
Options[i].attachEvent("onmouseup",function(){selectedText(obj)});
}
oWhere.appendChild(optionDiv);
}
optionDiv.onselectstart = function() {return false;}
function showOptions(obj,selected){
var arr =new Array();
for(var i=0;i<selected.options.length;i++){
arr[i]=selected.options[i].value;
}
createselectelements(obj,arr);
if(optionDiv.childNodes.length==0){
optionDiv.style.visibility = "hidden";
}else{
optionDiv.style.visibility = "visible";
}
}
document.onclick = function() {
optionDiv.style.visibility = "hidden";
}
function moveWithOptions(bg,color) {
with(event.srcElement) {
style.backgroundColor = bg;
style.color = color;
}
}
function selectedText(obj) {
with(event.srcElement) {
obj.innerText = innerText;
}
optionDiv.style.visibility = "hidden";
}
/*通用函數*/
//獲取物件座標
function getSelectPosition(obj) {
var objLeft = obj.offsetLeft;
var objTop = obj.offsetTop;
var objParent = obj.offsetParent;
while (objParent.tagName != "BODY") {
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
return([objLeft,objTop]);
}
</script>
<select name="selectmenu" id="selectmenu" style="position:absolute;top:100px; width: 110px; height: 0px; left: 90px; clip: rect(0 180 110 90) " onChange="dmtxt.value=this.options[this.selectedIndex].value">
<option value="">選擇郵箱</option>
<option value="sina.com">sina.com</option>
<option value="sohu.com">sohu.com</option>
<option value="tom.com">tom.com</option>
<option value="126.com">126.com</option>
<option value="163.com">163.com</option>
<option value="yahoo.com.cn">yahoo.com.cn</option>
<option value="kingsoft.com">kingsoft.com</option>
</select>
<input name="dmtxt" type="text" value="" onpropertychange="showOptions(this,document.all('selectmenu'));" onMouseOver="this.select();this.focus();" style="position:absolute;top:100px; width: 95px; height:21px; left:90px;">
參考:HTTP://hi.baidu.com/wlyln/blog/item/01892330d48b3b9aa8018e00.html
HTTP://hi.baidu.com/top147/blog/item/ebddb6cafe360487c81768a6.html
全站熱搜
留言列表
