下拉select選擇框

body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa;position:relative;padding:10px;}

h1{font-size:12px;color:#444;}

ul{margin:0;padding:0;list-style:none;}

.dropDownList{position:absolute;left:100px;top:100px;}

.dropDownList div.dropdown{float:left;margin-right:120px;}

.dropDownList span{display:block;width:146px;height:26px;1122123

2244234background:url(http://p1.mb5u.com/texiao/5/20100522231610336.gif) left top no-repeat;line-height:26px;text-indent:12px;border:solid 1px #83BBD9;cursor:default;}

.dropDownList span.over{background-position:left bottom;border-color:#B4C91A;}

.dropDownList ul{width:200px;display:none;position:absolute;}

.dropDownList ul li{background:#eee;height:20px;width:100%;padding:3px 0;text-indent:12px;cursor:default;line-height:20px;}

/*普通狀態(tài)下的樣式*/

.dropDownList ul li.normal{background:#eee;}

/*鼠標(biāo)移上的樣式*/

.dropDownList ul li.over{background:#ccc;}

/*被選中的樣式*/

.dropDownList ul li.current{background:#c2c2c2;font-weight:bold;}

.dropDownList ul.show{display:block;}

請(qǐng)選擇

1986

1987

1988

1989

1990

請(qǐng)選擇年份

性別

男

女

不是男，也不是女

請(qǐng)選擇性別

幼兒班

小學(xué)

初中

高中

請(qǐng)選擇學(xué)歷

var ____configArray;

function __initDropDownList(configArray){

//獲取Select菜單

____configArray=configArray;

var existArray=configArray.split("|");

for(var i=0;i

if(existArray[i].length<1){return;}

//根據(jù)參數(shù)分別獲取div，并分別添加事件

var parentContainer=document.getElementById(existArray[i]);

if(!parentContainer){return;}

//獲取下面的select，且獲取其中的option

var selectObj=parentContainer.getElementsByTagName("select");

if(selectObj.length<1){return;}

var optionArray=selectObj[0].getElementsByTagName("option");

//獲取option，并分別添加到各個(gè)li

var optionLength=optionArray.length;

for(var j=0;j

//獲取ul，以便能夠添加項(xiàng)目

var ulObj=parentContainer.getElementsByTagName("ul");

if(ulObj.length<1){return;}

//獲取span，以便能顯示當(dāng)前選擇的項(xiàng)目

var spanObj=parentContainer.getElementsByTagName("span");

if(spanObj.length<1){return;}

var liObj=document.createElement("li");

var textNode=document.createTextNode(optionArray[j].firstChild.nodeValue)

liObj.appendChild(textNode);

liObj.setAttribute("currentIndex",j);

//如果option的selected="selected"

if (optionArray[j].selected){

selectCurrentItem(ulObj[0],liObj);

}

//給每個(gè)liObj添加事件

liObj.οnclick=function(){

selectCurrentItem(this.parentNode,this);

}

liObj.οnmοuseοver=function(){if(this.className.indexOf("current")<0){this.className="over";}}

liObj.οnmοuseοut=function(){if(this.className.indexOf("current")<0){this.className="normal";}}

ulObj[0].appendChild(liObj);

spanObj[0].οnclick=function(event){

//如果當(dāng)前是顯示的，就隱藏，反之亦然

showHiddenUl(this);

}

spanObj[0].οnmοuseοver=function(){this.className='over';}

spanObj[0].οnmοuseοut=function(){this.className="";};

ulObj[0].οnclick=function(){this.className="";}

}

parentContainer.οnclick=function(event){

if(!event){event=window.event;}

event.cancelBubble=true;

var eventUlObj=this.getElementsByTagName("ul")[0];

bodyClickHiddenUl(eventUlObj);

}

}

}

function selectCurrentItem(ulObj,currentObj){

var parentObj=ulObj.parentNode;

var spanObj=parentObj.getElementsByTagName("span")[0];

spanObj.firstChild.nodeValue=currentObj.firstChild.nodeValue;

var selectObj=parentObj.getElementsByTagName("select")[0];

selectObj.selectedIndex=parseInt(currentObj.getAttribute("currentIndex"));

var ulLiObj=ulObj.getElementsByTagName("li");

var length=ulLiObj.length;

var currentLiObj=null;

for(var i=0;i

currentLiObj=ulLiObj[i];

currentLiObj.className="normal";

}

currentObj.className="current";

}

function showHiddenUl(currentObj){

var parentNode=currentObj.parentNode;

var ulObj=parentNode.getElementsByTagName("ul")[0];

if(ulObj.className==""){

ulObj.className="show";

}else{

ulObj.className="";

}

}

//點(diǎn)擊body區(qū)域(非“下拉菜單”)隱藏菜單

function addBodyClick(func) {

var bodyObj=document.getElementsByTagName("body")[0];

var oldBodyClick = bodyObj.onclick;

if (typeof bodyObj.onclick != 'function') {

bodyObj.onclick = func;

} else {

bodyObj.onclick = function() {

oldBodyClick();

func();

}

}

}

//隱藏所有的UL

function bodyClickHiddenUl(eventUlObj){

var existArray=____configArray.split("|");

for(var i=0;i

if(existArray[i].length<1){return;}

//尋找所有UL并且隱藏

var parentContainer=document.getElementById(existArray[i]);

if(!parentContainer){return;}

var ulObj=parentContainer.getElementsByTagName("ul");

if(eventUlObj!=ulObj[0]){

ulObj[0].className="";

}

}

}

var __dropDownList="dropDownList1|dropDownList2|dropDownList3";

__initDropDownList(__dropDownList);

//添加這個(gè)可以確保點(diǎn)擊body區(qū)域的時(shí)候 也可以隱藏菜單

addBodyClick(bodyClickHiddenUl);

總結(jié)

以上是生活随笔為你收集整理的html下拉选择图片,图片+JavaScript+CSS打造漂亮的select下拉选择框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。