自定义下拉框

源代码：

代码

<HTML>
<HEAD>
<title>自定义下拉框测试</title >
<style>
.customize_head {BORDER-RIGHT: 2px inset; BORDER-TOP: 2px inset; BORDER-LEFT: 2px inset;BORDER-BOTTOM: 2px inset; HEIGHT: 23px;CURSOR: default; }
.customize_select{PADDING-LEFT: 2px; BACKGROUND: #fff;border-width:0px;CURSOR:default;width:100%;}
.customize_arrow {BACKGROUND-IMAGE:url(customize_arrow.gif);WIDTH: 17px;HEIGHT: 18px;vertical-align:middle;float:right;}
.customize_options {BORDER:solid 1px #A7A6AA;display: none;OVERFLOW-X: hidden; OVERFLOW-y:auto;POSITION: absolute;CURSOR: default; }
.customize_link0 {BORDER-TOP: #eee 1px solid; PADDING-LEFT: 2px; BACKGROUND: #fff; WIDTH: 100%; COLOR: #000; HEIGHT: 20px;}
.customize_link1 {BORDER-TOP: #047 1px solid; PADDING-LEFT: 2px; BACKGROUND: #058; WIDTH: 100%; COLOR: #fe0; HEIGHT: 20px;}
</style>

<script language="javascript">
var __CustomizeCurrentObj=null;
//obj为文本框的对象
function dropdown(obj){
    if(__CustomizeCurrentObj!=null)　__CustomizeCurrentObj.style.display="none";
    __CustomizeCurrentObj=document.getElementById("customize_options");
    __CustomizeCurrentObj.ssInput=obj.id;
    var　ttop  = obj.offsetTop;       //TT控件的定位点高
    var　thei  = obj.clientHeight;    //TT控件本身的高
    var　twid  = obj.clientWidth;     //TT控件本身的高
    var　tleft = obj.offsetLeft;      //TT控件的定位点宽
    while(obj = obj.offsetParent){ttop+=obj.offsetTop; tleft+=obj.offsetLeft;}
    __CustomizeCurrentObj.style.left=tleft;
    __CustomizeCurrentObj.style.width=twid + 3;
    __CustomizeCurrentObj.style.display="block";
    if (__CustomizeCurrentObj.clientHeight > 240) __CustomizeCurrentObj.style.height = 240;
    /*
    if (__CustomizeCurrentObj.clientHeight+ttop-_TabDiv.scrollTop>document.body.clientHeight-16) {
        __CustomizeCurrentObj.style.top=ttop - __CustomizeCurrentObj.clientHeight - 2 - _TabDiv.scrollTop;
    }
    else {
        _dqTabDdlb.style.top=ttop + thei + 2 - _TabDiv.scrollTop;
    }
    */
}

//隐藏
function customize__Hidden(){
    if(__CustomizeCurrentObj!=null && event.srcElement.column_tag==null) __CustomizeCurrentObj.style.display="none";
}
//变色
function customize__Light(obj){
    if(__CustomizeCurrentObj != null){
        for(var i=0;i<__CustomizeCurrentObj.childNodes.length;i++){__CustomizeCurrentObj.childNodes[i].className="customize_link0";}
        obj.className="customize_link1";
    }
}
function customize__select(obj){//替换显示内容
    /*
    document.all.text1.innerText=obj.innerText;
    document.all.form1.city.value=obj.data;
    */
    var srcInputParent=document.getElementById(__CustomizeCurrentObj.ssInput);
    if(srcInputParent!=null){
        srcInputParent.childNodes[1].value=obj.innerText;
        srcInputParent.childNodes[2].value=obj.data;
        srcInputParent.className="customize_head";
    }
    if(__CustomizeCurrentObj!=null){__CustomizeCurrentObj.ssInput="";__CustomizeCurrentObj.style.display="none";__CustomizeCurrentObj=null;}
}
document.onclick=customize__Hidden

    </script>
</HEAD>
<body>


<form method="post" id="form1" >
<table border=1px width=700px>
    <tr>
        <td width=100px>abc</td>
        <td>
            <div class="customize_head" id="myddl_0_city"  style="width:100px;" column_tag="city" onclick="dropdown(this)" >
                <div class="customize_arrow" column_tag="city" ></div><input type=text name="myctrl_0_value" class="customize_select" column_tag="city" readonly /><input type=hidden name="mytext_0_data" value="" />
            </div>
        </td>
    </tr>
</table>
<div id="customize_options" class="customize_options" style="width:100px;" column_tag="city" ssInput="" onselectstart="return false;">
    <div class="customize_link0" onmouseover="customize__Light(this)" data="1" onclick="customize__select(this);">北京市</div>
    <div class="customize_link0" onmouseover="customize__Light(this)" data="2" onclick="customize__select(this);">上海市</div>
    <div class="customize_link0" onmouseover="customize__Light(this)" data="3" onclick="customize__select(this);">河南省</div>
    <div class="customize_link0" onmouseover="customize__Light(this)" data="4" onclick="customize__select(this);">深圳市</div>
    <div class="customize_link0" onmouseover="customize__Light(this)" data="5" onclick="customize__select(this);">大连市</div>
    <div class="customize_link0" onmouseover="customize__Light(this)" data="6" onclick="customize__select(this);">云南省</div>
</div>
</form>
</body>
</HTML>

posted on 2010-10-13 10:35 李泉生阅读(95) 评论(0) 收藏举报

刷新页面返回顶部

一切皆有可能

公告

自定义下拉框