下拉列表

最新推荐文章于 2024-04-28 17:01:11 发布

phqm

最新推荐文章于 2024-04-28 17:01:11 发布

阅读量994

点赞数

分类专栏： asp.net 文章标签： function border table class layout input

本文链接：https://blog.csdn.net/phqm/article/details/2247795

版权

asp.net 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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.innerText = valueString;
}

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 makeSelectBox(thisId) {
var downArrowSrc = "myfile/img/bt_down01.gif"; //自定义下拉箭头的图片路径
var downArrowSrcWidth = 16; //箭头的宽度
var optionHeight = 19; // 选项的高度
var optionMaxNum = 7; // 显示最多选项的数量
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 + "' style='cursor:hand;' onClick=/"hideOptionLayer

('"+ objId + "')/"></td>";
newSelect += " </tr>";
newSelect += " <tr>";
newSelect += "  <td height='1'></td>";
newSelect += " </tr>";
newSelect += " <tr>";
newSelect += "  <td bgcolor='#D3D3D3'>";
newSelect += "  <div class='selectBoxOptionInnerLayer' style='width:" + (selectBoxWidth-1) + "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;
  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;'>" +

nowText + "</td>";
newSelect += " <input type='hidden' id='"+ objId + "SelectBoxOptionValue" +

i + "' value='" + nowValue + "'>";
  newSelect += "   </tr>";
}
newSelect += "  </table>";
newSelect += "  </div>";
newSelect += "  </td>";
newSelect += " </tr>";
newSelect += "</table>";
newSelect += "<table cellpadding='0' cellspacing='1' border='0' bgcolor='#D3D3D3' onClick=/"viewOptionLayer

('"+ objId + "')/" style='cursor:hand;'>";
newSelect += " <tr>";
newSelect += "  <td style='padding-left:1px' bgcolor='#FFFFFF'>";
newSelect += "  <table cellpadding='0' cellspacing='0' border='0'>";
newSelect += "   <tr>";
newSelect += "    <td><div id='" + objId + "selectBoxSelectedValue'

class='selectBoxSelectedArea' style='width:" + (selectBoxWidth - downArrowSrcWidth - 4) + "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;
</script>
<style>
select {
BORDER-RIGHT: #d3d3d3 1px solid; BORDER-TOP: #d3d3d3 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #d3d3d3 1px

solid; COLOR: #7f7f7f; BORDER-BOTTOM: #d3d3d3 1px solid; FONT-FAMILY: Dotum,Dotumche,verdana; HEIGHT: 18px
}
.box01 {
BORDER-RIGHT: #d3d3d3 1px solid; BORDER-TOP: #d3d3d3 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #d3d3d3 1px

solid; COLOR: #7f7f7f; BORDER-BOTTOM: #d3d3d3 1px solid; FONT-FAMILY: Dotum,Dotumche,verdana; HEIGHT:
18px; BACKGROUND-COLOR: #ffffff
}
.selectBoxSelectedArea {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #7d838e; LINE-HEIGHT: 17px; PADDING-TOP: 1px; FONT-FAMILY: "宋

体"; BACKGROUND-COLOR: #ffffff
}
.selectBoxSelectedAreaFocus {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 17px; PADDING-TOP: 1px; FONT-FAMILY: "宋

体"; BACKGROUND-COLOR: #ffffff
}
.selectBoxOption {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #7d838e; LINE-HEIGHT: 17px; PADDING-TOP: 2px; FONT-FAMILY: "宋

体"; BACKGROUND-COLOR: #ffffff
}
.selectBoxOptionOver {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 17px; PADDING-TOP: 2px; FONT-FAMILY: "宋

体"; BACKGROUND-COLOR: #ffffff
}
.selectBoxOptionInnerLayer {
BORDER-RIGHT: #e4e4e4 1px solid; BORDER-TOP: #e4e4e4 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-

HIGHLIGHT-COLOR: #d3d3d3; OVERFLOW: auto; BORDER-LEFT: #e4e4e4 1px solid; SCROLLBAR-SHADOW-COLOR: #d3d3d3;

SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #838383; SCROLLBAR-TRACK-COLOR: #eaeaea; BORDER-BOTTOM:

#e4e4e4 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; BACKGROUND-COLOR: #ffffff
}
</style>
<script src="selectBox.js" type="text/javascript"></script>
<select name="select1" style="width:110px;height:18px;display:none;" id="selectTest1">
  <option selected="selected">==请选择==</option>
  <option value="one">我是一个好人</option>
  <option value="two">我是一个好人</option>
  <option value="three">我是一个好人</option>
  <option value="four">我是一个好人</option>
  <option value="five">我是一个好人</option>
  <option value="six">我是一个好人</option>
  <option value="seven">我是一个好人</option>
  <option value="eight">我是一个好人</option>
  <option value="nine">我是一个好人</option>
  </select>
  <script>
  makeSelectBox("selectTest1");
  if("" != ""){
    sele