可输入且提示的select选择框

最新推荐文章于 2023-02-06 16:55:13 发布

findingwork

最新推荐文章于 2023-02-06 16:55:13 发布

阅读量374

点赞数

分类专栏： javaScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/findingwork/article/details/84263241

版权

javaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<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++) {
if (document.all)
{
Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});
Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});
Options[i].attachEvent("onmouseup",function(){selectedText(obj)});
}else
{
Options[i].addEventListener("mouseup",function(){selectedText(obj)},false);
Options[i].addEventListener("mouseout",function(){moveWithOptions("","")},false);
Options[i].addEventListener("mouseover",function(){moveWithOptions("highlight","white")},false);

}

}
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++){
alert(selected.options[i].name);
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.value = 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>
</head>

<body>

<select name="selectmenu" id="selectmenu" style="visibility:hidden" onChange="document.getElementById('dmtxt').value=this.options[this.selectedIndex].name" >
<option value="">选择邮箱</option>
<option value="sina.com">www.sina.com</option>
<option value="sohu.com">www.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" id ="dmtxt" type="text" value="" οninput="showOptions(this,document.getElementById('selectmenu'));" onMouseOver="this.select();this.focus();" style="">

<select name="selectmenu" id="selectmenu" style="visibility:hidden" onChange="document.getElementById('dmtxt').value=this.options[this.selectedIndex].name" >
<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" id ="dmtxt" type="text" value="" οninput="showOptions(this,document.getElementById('selectmenu'));" onMouseOver="this.select();this.focus();" style="">
<script>
</script>
</body>

</html>

[/code]

findingwork

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可输入且提示的select选择框

[code] New Document .optionDiv { border:1px solid black;border-top:0px;position:absolute;visibility:hidden;} .optionDiv div { font-s...
复制链接

扫一扫

专栏目录