模仿combbox的创建下拉列表js支持动态选项

这是一个能够点击input框就可以显示下拉列表,点击列表的选项自动填充文本框的js文件,用于模仿combbox,支持动态改变列表项

引用方法


<body><script type="text/javascript" src="combbox.js"></script>
<script type="text/javascript">
List_int();
</script>


<label>
<input name="textfield" type="text" id="textfield" onfocus="List_Show()" value="asdf "/>
</label>
</body>
</html>
 

下面为list.js文件内容

// JavaScript Document
var InputBox_Id="";

function List_int() /*创建下拉列表*/
{
document.writeln("<style type=/"text/css/">");
document.writeln("<!--");
document.writeln("#List_div {");
document.writeln(" width: 145px;");
document.writeln(" background-color: #FFF;");
document.writeln(" height: 100px;");
document.writeln(" border: 1px solid #CCC;");
document.writeln(" overflow: auto;");
document.writeln(" position: absolute;");
document.writeln(" left: 10px;");
document.writeln(" top: 57px;");
document.writeln(" float: left;");
document.writeln(" visibility: hidden;");
document.writeln("}");
document.writeln("");
document.writeln("#List_div ul {");
document.writeln(" margin: 0 0 0 30px;");
document.writeln(" padding: 0px;");
document.writeln(" font-size: 12px;");
document.writeln(" color: #000;");
document.writeln(" line-height: 30px;");
document.writeln(" white-space: normal;");
document.writeln("}");
document.writeln("");
document.writeln("#List_div li {");
document.writeln(" list-style-type: circle;");
document.writeln(" display: inline;");
document.writeln(" float: left;");
document.writeln(" width: 130px;");
document.writeln(" font-size: 14px;");
document.writeln(" height: 20px;");
document.writeln(" margin-left: -25px;");
document.writeln("}");
document.writeln("");
document.writeln("#List_div li a {");
document.writeln(" text-decoration: none;");
document.writeln(" font-family: Arial, Helvetica, sans-serif;");
document.writeln(" padding: 7px 10px;");
document.writeln(" color: #000;");
document.writeln("}");
document.writeln("");
document.writeln("#List_div li:hover {");
document.writeln(" color: #000;");
document.writeln(" background-color: #FC0;");
document.writeln("}");
document.writeln("-->");
document.writeln("</style>");


document.writeln("<div id=/"List_div/" >");
document.writeln("<ul id=/"List_div_ul/"> ");
document.writeln("");
document.writeln("</ul>");
document.writeln("");
document.writeln("</div>");
}

function option_value(text) /*把返回值替换文本框的值*/
{
InputBox_Id.value =text;
List_Close();
}

function List_Show() //显示下拉列表
{

List_options("1 2 3 4 5 6");
InputBox_Id = window.event.srcElement;
var obj=document.getElementById("List_div").style
obj.visibility="visible";
obj.left=getLeft(InputBox_Id)+"px";
obj.top=getTop(InputBox_Id)+20+"px"

}

function List_options(text)//刷新选项列表
{ var opts_html=""
var opts =text.split(" ")// 拆分字符串
opts_num=opts.length; //选项数目
opt_h=20; //每个选项的高度
for(var i=0;i<opts_num;i++)
{
opts_html=opts_html+"<li onclick=/"option_value('"+opts[i]+"')/">"+opts[i]+"<//li>";
}
document.getElementById("List_div_ul").innerHTML=opts_html;
var obj=document.getElementById("List_div").style
if (opts_num<=6){
obj.height=opt_h*opts_num
}else
{obj.height=opt_h*6
}

}

function List_Close()
{
document.getElementById("List_div").style.visibility="hidden";
}

function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}

你可能感兴趣的:(模仿combbox的创建下拉列表js支持动态选项)