带滚动条的下拉框（select:用div模拟的）

最新推荐文章于 2024-05-16 23:39:45 发布

置顶飞奔的蜗牛2017

最新推荐文章于 2024-05-16 23:39:45 发布

阅读量6.7k

点赞数

分类专栏：带滚动条的下拉框（select:用div模拟的）文章标签：带滚动条的下拉框select用div模拟

带滚动条的下拉框（select:用div模拟的）专栏收录该内容

1 篇文章 0 订阅

订阅专栏

每文一语：谋事在人，成事在天；小事人定，大事天定

<HTML>
<HEAD>
    <title>模拟下拉列表框</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style>BODY {
        FONT: 12px 宋体
    }
    TD {
        FONT: 12px 宋体
    }
    DIV {
        FONT: 12px 宋体
    }
    LABEL {
        PADDING-RIGHT: 0px; PADDING-LEFT: 4px; PADDING-BOTTOM: 0px; PADDING-TOP: 3px; HEIGHT: 19px
    }
    .link_box {
        CURSOR: default; TEXT-ALIGN: left
    }
    .link_head {
        BORDER-RIGHT: 2px inset; BORDER-TOP: 2px inset; BORDER-LEFT: 2px inset; WIDTH: 100%; 
    BORDER-BOTTOM: 2px inset; HEIGHT: 23px
    }
    .link_text {
        PADDING-LEFT: 2px; BACKGROUND: #fff
    }
    .link_arrow0 {
        BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; BACKGROUND: buttonface; 
    FONT: 14px marlett; BORDER-LEFT: 2px outset; WIDTH: 22px;
         BORDER-BOTTOM: 2px outset; HEIGHT: 100%; TEXT-ALIGN: center
    }
    .link_arrow1 {
        BORDER-RIGHT: buttonshadow 1px solid; PADDING-RIGHT: 0px; 
    BORDER-TOP: buttonshadow 1px solid; PADDING-LEFT: 2px; 
    BACKGROUND: buttonface; PADDING-BOTTOM: 0px; FONT: 14px marlett; 
    BORDER-LEFT: buttonshadow 1px solid; WIDTH: 22px; PADDING-TOP: 2px; 
    BORDER-BOTTOM: buttonshadow 1px solid; HEIGHT: 100%; TEXT-ALIGN: center
    }
    .link_value {
        BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FILTER: alpha(opacity:0); 
    VISIBILITY: hidden; OVERFLOW-X: hidden; OVERFLOW: auto; BORDER-LEFT: 1px solid; 
    BORDER-BOTTOM: 1px solid; POSITION: absolute
    }
    .link_record0 {
        BORDER-TOP: #eee 1px solid; PADDING-LEFT: 2px; BACKGROUND: #fff; 
    WIDTH: 100%; COLOR: #000; HEIGHT: 20px
    }
    .link_record1 {
        BORDER-TOP: #047 1px solid; PADDING-LEFT: 2px; BACKGROUND: #058; 
    WIDTH: 100%; COLOR: #fe0; HEIGHT: 20px
    }
    </style>
    <script>
        var dropShow=false
        var currentID
        function dropdown(el){
            if(dropShow){
                dropFadeOut()
            }else{
                currentID=el
                el.style.visibility="visible"
                dropFadeIn()
            }
        }
        function dropFadeIn(){//选单淡入的效果
            if(currentID.filters.alpha.opacity<100){
                currentID.filters.alpha.opacity+=20
                fadeTimer=setTimeout("dropFadeIn()",50)
            }else{
                dropShow=true
                clearTimeout(fadeTimer)
            }
        }
        function dropFadeOut(){//选单淡出的效果
            if(currentID.filters.alpha.opacity>0){
                clearTimeout(fadeTimer)
                currentID.filters.alpha.opacity-=20
                fadeTimer=setTimeout("dropFadeOut()",50)
            }else{
                dropShow=false
                currentID.style.visibility="hidden"
            }
        }
        function dropdownHide(){
            if(dropShow){
                dropFadeOut()
                dropShow=false
            }
        }
        function hiLight(el){//高亮度显示指标位置
            if(dropShow){
                for(i=0;i<el.parentElement.childNodes.length;i++){
                    el.parentElement.childNodes(i).className="link_record0"
                }
                el.className="link_record1"
            }
        }
        function CheckMe(el){//替换显示内容
            document.all.text1.innerText=el.innerText
        }
        document.onclick=dropdownHide
    </script>
</HEAD>
<body text="#000000" onload="document.all.form1.reset()">
<div style="padding:10px;border-bottom:2px solid red">模拟下拉框</div>
<form method="post" action="WebDropDownList.aspx" id="form1" onsubmit="alert(city.value)">
    <div>
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1MzkwMjYyODZkZA==" />
    </div>

    <table>
        <tr>
            <td>
                <div class="link_box" onselectstart="return false" style="WIDTH: 100px">
                    <div class="link_head" onclick="dropdown(value1)">
                        <table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
                            <tr>
                                 <td>
                                  <div class="link_text"><nobr><label id="text1">请选择？</label></nobr></div>
                                 </td>
                                 <td align="right" width="22">
                                  <div onmouseup="this.className='link_arrow0'" class="link_arrow0" 
                                         onmousedown="this.className='link_arrow1'" onmouseout="this.className='link_arrow0'">6</div>
                                 </td>
                            </tr>
                        </table>
                    </div>
                    <div class="link_value" id="value1" style="WIDTH: 200px; HEIGHT: 100px">
                        <div id="mx">
                            <div class="link_record0" onmouseover="hiLight(this)" 
                                  onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>北京市</label></div>
                            <div class="link_record0" onmouseover="hiLight(this)" 
                                  onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>上海市</label></div>
                            <div class="link_record0" onmouseover="hiLight(this)"
                                  onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>河南省</label></div>
                            <div class="link_record0" onmouseover="hiLight(this)"
                                  onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>深圳市</label></div>
                            <div class="link_record0" onmouseover="hiLight(this)"
                                  onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>大连市</label></div>
                            <div class="link_record0" onmouseover="hiLight(this)"
                                  onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>云南省</label></div>
                        </div>
                    </div>
                </div>
            </td>
            <td><input type="hidden" value="您尚未选择" name="city"> <input type="submit" value="确定">
            </td>
        </tr>
    </table>
</form>
</body>
</HTML>

请关注我微信公众号：

飞奔的蜗牛2017

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
带滚动条的下拉框（select:用div模拟的）

每文一语：谋事在人，成事在天；小事人定，大事天定<HTML><HEAD> <title>模拟下拉列表框</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style>BODY { ...
复制链接

扫一扫

专栏目录