十分精致的 Select Box 下拉列表
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
/**** Select Box ****/
var nowOpenedSelectBox = "";
var mousePosition = "";
function selectThisValue(thisId,thisIndex,thisValue,thisString) {
var objId = thisId;
var nowIndex = thisIndex;
var valueString = thisString;
var sourceObj = document.getElementById(objId);
var nowSelectedValue = document.getElementById(objId+"SelectBoxOptionValue"+nowIndex).value;
hideOptionLayer(objId);
if (sourceObj) sourceObj.value = nowSelectedValue;
settingValue(objId,valueString);
selectBoxFocus(objId);
if (sourceObj.onchange) sourceObj.onchange();
}
function settingValue(thisId,thisString) {
var objId = thisId;
var valueString = thisString;
var selectedArea = document.getElementById(objId+"selectBoxSelectedValue");
if (selectedArea) selectedArea.innerHTML = valueString.replace("&","&");
}
function viewOptionLayer(thisId) {
var objId = thisId;
var optionLayer = document.getElementById(objId+"selectBoxOptionLayer");
if (optionLayer) optionLayer.style.display = "";
nowOpenedSelectBox = objId;
setMousePosition("inBox");
}
function hideOptionLayer(thisId) {
var objId = thisId;
var optionLayer = document.getElementById(objId+"selectBoxOptionLayer");
if (optionLayer) optionLayer.style.display = "none";
}
function setMousePosition(thisValue) {
var positionValue = thisValue;
mousePosition = positionValue;
}
function clickMouse() {
if (mousePosition == "out") hideOptionLayer(nowOpenedSelectBox);
}
function selectBoxFocus(thisId) {
var objId = thisId;
var obj = document.getElementById(objId + "selectBoxSelectedValue");
obj.className = "selectBoxSelectedAreaFocus";
obj.focus();
}
function selectBoxBlur(thisId) {
var objId = thisId;
var obj = document.getElementById(objId + "selectBoxSelectedValue");
obj.className = "selectBoxSelectedArea";
}
function selectBoxOptionRefresh(thisId) {
var optionHeight = 16;
var optionMaxNum = 6;
var objId = thisId;
var obj = document.getElementById(objId);
var trgObj = document.getElementById(objId+"SelectBoxOptionArea");
var newOption = "";
newOption += " <table cellpadding='0' cellspacing='0' border='0' width='100%' style='table-layout:fixed;word-break:break-all;'>";
for (var i=0 ; i < obj.options.length ; i++) {
var nowValue = obj.options[i].value;
var nowText = obj.options[i].text;
newOption += " <tr>";
newOption += " <td height='" + optionHeight + "' class='selectBoxOption' onMouseOver=\"this.className='selectBoxOptionOver'\" onMouseOut=\"this.className='selectBoxOption'\" onClick=\"selectThisValue('"+ objId + "'," + i + ",'" + nowValue + "','" + nowText + "')\" style='cursor:hand;'>" + nowText + "</td>";
newOption += " <input type='hidden' id='"+ objId + "SelectBoxOptionValue" + i + "' value='" + nowValue + "'>";
newOption += " </tr>";
}
newOption += " </table>";
if(trgObj) {
if (obj.options.length > optionMaxNum) trgObj.style.height = (optionHeight * optionMaxNum) + "px";
else trgObj.style.height = (optionHeight * obj.options.length) + "px";
trgObj.innerHTML = newOption;
var haveSelectedValue = false;
for (var i=0 ; i < obj.options.length ; i++) {
if (obj.options[i].selected == true) {
haveSelectedValue = true;
settingValue(objId,obj.options[i].text);
}
}
if (!haveSelectedValue) settingValue(objId,obj.options[0].text);
}
}
function makeSelectBox01(thisId) {
var downArrowSrc = "http://bbs.51js.com/attachment.php?aid=6539&checkid=7f39f";
var downArrowSrcWidth = 15;
var optionHeight = 17;
var optionMaxNum = 6;
var optionInnerLayerHeight = "";
var objId = thisId;
var obj = document.getElementById(objId);
var selectBoxWidth = parseInt(obj.style.width);
var selectBoxHeight = parseInt(obj.style.height);
if (obj.options.length > optionMaxNum) optionInnerLayerHeight = "height:"+ (optionHeight * optionMaxNum) + "px";
newSelect = "<table id='" + objId + "selectBoxOptionLayer' cellpadding='0' cellspacing='0' border='0' style='position:absolute;z-index:100;display:none;' onMouseOver=\"viewOptionLayer('"+ objId + "')\" onMouseOut=\"setMousePosition('out')\">";
newSelect += " <tr>";
newSelect += " <td height='" + (selectBoxHeight - 1) + "' style='cursor:hand;' onClick=\"hideOptionLayer('"+ objId + "')\"></td>";
newSelect += " </tr>";
newSelect += " <tr>";
newSelect += " <td style='border:1px solid #E5E5E5'>";
newSelect += " <table cellpadding='0' cellspacing='0' border='0' width='100%'>";
newSelect += " <tr>";
newSelect += " <td height='3' bgcolor='#FFFFFF'></td>";
newSelect += " </tr>";
newSelect += " </table>";
newSelect += " <div class='selectBoxOptionInnerLayer' style='width:" + (selectBoxWidth-2) + "px;" + optionInnerLayerHeight + "'>";
newSelect += " <table cellpadding='0' cellspacing='0' border='0' width='100%' style='table-layout:fixed;word-break:break-all;'>";
for (var i=0 ; i < obj.options.length ; i++) {
var nowValue = obj.options[i].value;
var nowText = obj.options[i].text;
if (typeof(obj.options[i].separator) == "undefined") {
newSelect += " <tr>";
newSelect += " <td height='" + optionHeight + "' class='selectBoxOption' onMouseOver=\"this.className='selectBoxOptionOver'\" onMouseOut=\"this.className='selectBoxOption'\" onClick=\"selectThisValue('"+ objId + "'," + i + ",'" + nowValue + "','" + nowText + "')\" style='cursor:hand;padding-left:15px;'>" + nowText + "</td>";
newSelect += " <input type='hidden' id='"+ objId + "SelectBoxOptionValue" + i + "' value='" + nowValue + "'>";
newSelect += " </tr>";
} else {
}
}
newSelect += " </table>";
newSelect += " </div>";
newSelect += " <table cellpadding='0' cellspacing='0' border='0' width='100%'>";
newSelect += " <tr>";
newSelect += " <td height='4' bgcolor='#FFFFFF'></td>";
newSelect += " </tr>";
newSelect += " </table>";
newSelect += " </td>";
newSelect += " </tr>";
newSelect += "</table>";
newSelect += "<table cellpadding='0' cellspacing='0' border='0' onClick=\"viewOptionLayer('"+ objId + "')\" style='cursor:hand; border-top:1px solid #E5E5E5;border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;border-bottom:1px solid #E5E5E5' onMouseOut=\"setMousePosition('out')\">";
newSelect += " <tr>";
newSelect += " <td bgcolor='#FFFFFF'>";
newSelect += " <table cellpadding='0' cellspacing='0' border='0'>";
newSelect += " <tr>";
newSelect += " <td><div id='" + objId + "selectBoxSelectedValue' class='selectBoxSelectedArea' style='width:" + (selectBoxWidth - downArrowSrcWidth-2) + "px;height:" + (selectBoxHeight - 2) + "px;overflow:hidden;' onBlur=\"selectBoxBlur('" + objId + "')\"></div></td>";
newSelect += " <td><img src='" + downArrowSrc + "' width='" + downArrowSrcWidth + "' border='0'></td>";
newSelect += " </tr>";
newSelect += " </table>";
newSelect += " </td>";
newSelect += " </tr>";
newSelect += "</table>";
document.write(newSelect);
var haveSelectedValue = false;
for (var i=0 ; i < obj.options.length ; i++) {
if (obj.options[i].selected == true) {
haveSelectedValue = true;
settingValue(objId,obj.options[i].text);
}
}
if (!haveSelectedValue) settingValue(objId,obj.options[0].text);
}
document.onmousedown = clickMouse;
/**** Select Box ****/
</script>
<style type="text/css">
<!--
.selectBoxSelectedArea {
FONT-FAMILY: Verdana;
FONT-SIZE: 12px;
LINE-HEIGHT: 18px;
COLOR: #ff601f;
BACKGROUND-COLOR: #FFFFFF
PADDING-TOP: 4px;
PADDING-LEFT: 5px;
}
.selectBoxSelectedAreaFocus {
FONT-FAMILY: Verdana;
FONT-SIZE: 12px;
LINE-HEIGHT: 18px;
COLOR: #ff601f;
BACKGROUND-COLOR: #FFFFFF
PADDING-TOP: 4px;
PADDING-LEFT: 5px;
}
.selectBoxOption {
FONT-FAMILY: Verdana;
FONT-SIZE: 12px;
LINE-HEIGHT: 18px;
COLOR: #757575;
BACKGROUND-COLOR: #FFFFFF
PADDING-TOP: 4px;
PADDING-LEFT: 5px;
}
.selectBoxOptionOver {
FONT-FAMILY: Verdana;
FONT-SIZE: 12px;
LINE-HEIGHT: 18px;
COLOR: #ff601f;
BACKGROUND-COLOR: #FFFFFF
PADDING-TOP: 4px;
PADDING-LEFT: 5px;
}
.selectBoxOptionInnerLayer {
OVERFLOW: auto;
SCROLLBAR-FACE-COLOR: #f7f7f7;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #cccccc;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #cccccc;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
BACKGROUND-COLOR: #ffffff
}
-->
</style>
</head>
<body>
<SELECT id=leftSelectBoxGlobal style="DISPLAY: none; WIDTH: 140px; HEIGHT: 18px" name=url>
<OPTION value= selected separator>请选择手机型号</OPTION>
<OPTION value=>- 摩托罗拉 E365</OPTION>
<OPTION value=>- 摩托罗拉 T720i</OPTION>
<OPTION value=>- 诺基亚 3100</OPTION>
<OPTION value=>- 诺基亚 3200</OPTION>
<OPTION value=>- 诺基亚 3108</OPTION>
<OPTION value=>- 诺基亚 3100</OPTION>
<OPTION value=>- 诺基亚 3200</OPTION>
<OPTION value=>- 诺基亚 3108</OPTION>
</SELECT><SCRIPT>makeSelectBox01("leftSelectBoxGlobal");</SCRIPT>
</body>
</html>
