一个js模拟下拉框效果
<!DOCTYPE"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="javascrpt/elect2.js" type="text/javascript"></script><style>* { padding:0px; margin:0px; }#tele_name0,#tele_name1 { border:1px solid #ccc; -webkit-border-radius:5px; -moz-border-radius:5px; box-shadow:2px 2px 5px #ccc; height:24px; line-height:24px; width:150px; margin:30px auto; padding:3px 8px; float:left; }#tele_name0 h1,#tele_name1 h1 { font-weight:normal; font-size:14px; line-height:24px; height:24px; padding:0px; margin:0px; }#tele_name0 ul,#tele_name1 ul { border:1px solid #ccc; margin-top:8px; border-bottom:none; }#tele_name0 ul li,#tele_name1 ul li { list-style:none; cursor:pointer; line-height:24px; border-bottom:1px solid #ccc; padding:0px 5px; }.bg_color { background:#66CCCC; }</style></head><body><div id="tele_name0" onMouseOver="elec('tele_name0')" > <h1>请选择品牌</h1> <ul class="xiala" style="display:none; background:#ccc;"> <li id="heimei" class="logo_a0">sumsun</li> <li id="xiaxin"class="logo_a1">HTC</li> <li id="pingguo"class="logo_a2">NOKIA</li> </ul></div><div id="tele_name1" onMouseOver="elec('tele_name1');"> <h1>请选择型号</h1> </div></body></html>var arrText2=[];//定义数组；
var this_classname;
function elec(namei){
if(!document.getElementById("tele_name1")) return false;
if(!document.getElementById("tele_name0")) return false;
var div_box=document.getElementById(namei);//获取id
var this_id=document.getElementById("tele_name1");
var div2_h1=this_id.getElementsByTagName("h1")[0];
var box_h1=div_box.getElementsByTagName("h1");
var box_ul=div_box.getElementsByTagName("ul");
var box_li=div_box.getElementsByTagName("li");
var html_ele=document.getElementsByTagName("html")[0];//获取html;
html_ele.onclick=function(){
box_ul[0].style.display="none";
} //单击任何地方，下拉框隐藏；
box_h1[0].onclick=function(event){
if(!this_id.getElementsByTagName("ul"))return false;
if(!event){event=window.event;}
event.cancelBubble=true;//阻止冒泡事件，费了半天劲呢！
box_ul[0].style.display=(box_ul[0].style.display=="none") ? "block":"none";//单击h1如果下拉框显示则隐藏，如果隐藏则显示;
}
for(var i=0; i<box_li.length;i++){
box_li[i].onmouseover=function(){
this.className="bg_color";
}
box_li[i].onmouseout=function(){
this.className=" ";
}//鼠标移到li上变色；
box_li[i].onclick=function(){
box_h1[0].lastChild.nodeValue=this.lastChild.nodeValue;//单击li; h1获取当前li的文本内容；
div2_h1.lastChild.nodeValue="请选择型号";//第二个下拉框h1变成默认的请选择型号；
if(namei=="tele_name1"){
div2_h1.lastChild.nodeValue=this.lastChild.nodeValue;//如果是在第二下拉框里进行单击则获取当前的文本内容；
}
var getId=this.getAttribute("id");//获取当前被点击的li的id;
if(getId=="heimei"){
var arrText=["A3500","btwee","C234","dsese"];
var ul_classname="heimei"
arrText2=arrText.valueOf();
this_classname=ul_classname;
newadd();
}//如果当前li的ID=heimei则显示黑莓的型号；
else if(getId=="xiaxin"){
var arrText=["B123","B456","B789","B902"];
var ul_classname="xiaxin"
arrText2=arrText.valueOf();
this_classname=ul_classname;
newadd();
}//如果当前li的ID=xiaxin则显示xiaxin的型号；
else if(getId=="pingguo"){
var arrText=["IPAD","apple001","apple02","apple004","apple05"];
var ul_classname="pingguo"
arrText2=arrText.valueOf();
this_classname=ul_classname;
newadd();
}//如果当前li的ID=pingguo则显示pingguo的型号；
box_ul[0].style.display="none";
}
}
}
function newadd(){
var div_box=document.getElementById("tele_name0");//查找第一个div
var this_id=document.getElementById("tele_name1");//查找第二个div
var box_li=div_box.getElementsByTagName("li");//查找第一个div里的li;
var newul=document.createElement("ul");//创建ul;
newul.setAttribute("style","display:none");
newul.setAttribute("class","this_classname");//为ul设置属性；
var oFramnet=document.createDocumentFragment();//创建片段，确保加载更快；
var div_ul=this_id.getElementsByTagName("ul");
for(var i=0;i<div_ul.length;i++){
if(div_ul[i].getAttribute("class")!=this_classname){
this_id.removeChild(div_ul[i]);
}
}//判断当前的ul是不是需要的，如果不是删除ul节点；
for(var i=0;i<arrText2.length;i++){
var newli=document.createElement("li");
var newtext=document.createTextNode(arrText2[i]);
newli.appendChild(newtext);
newul.appendChild(newli);
oFramnet.appendChild(newul);
}
this_id.appendChild(oFramnet);//创建
//alert("tt");
我也是初学者，所以写的还不是太好，请多指教，因为下拉框的三角下拉箭头不能用css定义所以就自己写了一个，点击前面的选项后面的下拉框里的内容要跟这改变。
浙公网安备 33010602011771号