`
fenhonghai
  • 浏览: 15381 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

css+div模拟下拉列表选择框------完整版

    博客分类：
  • js
CSSJ# 
阅读更多
此控件唯一不足的就是下拉列表之间有间距，
哪位有好的办法消除html控件间的间距（不是控件内的间距哦，而是像一个button和另一个button纵向排列之后两个控件之间的上下间隔）欢迎讨论！


代码如下， 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style>
.div_1{
    height:100;
    overflow-x:hidden;
    overflow-y:scroll;
    cellspacing:0px;
    cellpadding:0px;
}
.table_1{
    top:0px;
    width:100%;
    heigth:20;
    border:1;
    font-size:14px;
    cellspacing:0px;
    cellpadding:0px;
}
.tr_1{
    heigth:20;
    width:300px;
    cursor:default;
}
</style>

<script>
function moveon(obj,objtext,objin){
    obj.background = "i.jpg";
    obj.style.color = "#FFFFFF";
    obj.style.border= 1;
    document.getElementById(objin).onblur ="";
}
function out(obj,objtext,objin){
    obj.background = "";
    obj.style.color = "";
    document.getElementById(objin).focus(); 
    document.getElementById(objin).onblur =function anonymous(){leave(objtext);};
}
function divmoveon(objtext,objin){
    document.getElementById(objin).onblur ="";
}

function divout(objtext,objin){
    document.getElementById(objin).focus(); 
    document.getElementById(objin).onblur =function anonymous(){leave(objtext);};
}
function selected(textobj,obj,divobj){
    document.getElementById(textobj).value=obj.firstChild.nodeValue;
    document.getElementById(divobj).style.display="none";
}
function showdiv_here(listid,obj,num,width){
    if(num>15){
        document.getElementById(listid).style.height = 22*15;
    }else{
        document.getElementById(listid).style.overflowY="hidden";
        document.getElementById(listid).style.height = num*22;
    }
    if(width<30){
        document.getElementById(listid).style.width=200;
    }
    document.getElementById(obj).style.display="";
}
function leave(divobj){
    document.getElementById(divobj).style.display="none";
}
</script>

</head>
<body > 
<table border=1>
<tr><td>hello</td>
<td><input type="text" id="name1" readonly="true" value="" onclick="showdiv_here('listdiv','showlist1',18,12);"  enable="false"  ></input>
<div id="A" style="position:relative">
<div id="showlist1" style="display:none;position:absolute;left:0px;top:0px">
<table  border=0 cellspacing=0 cellpadding=1>
   <tr><td bgcolor="#000000">
<table  bgcolor="#FFFFFF" border=0 cellspacing=0 cellpadding=0>
   <tr><td>
<div id="listdiv" class="div_1" onMouseDown ="divmoveon('showlist1','name1')"  onmouseover="divmoveon('showlist1','name1')" onmouseout="divout('showlist1','name1')">
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">1</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">3</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">4</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">5</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">6</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">1</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">3</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">4</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">5</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">6</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">1</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">4</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">5</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
             onclick ="selected('name1',this,'showlist1')">6</td></tr></table>
</div>
     </td></tr></table>
     </td></tr></table>
</div ></div>
</td></tr></table>
</body>
</html>

1.jpg为蓝色纯色图片，您可以做的跟下拉列表默认的颜色一样，运行即可见效果，效果图见附件

关键代码解析： 

function showdiv_here(listid,obj,num,width){
if(num>15){
document.getElementById(listid).style.height = 22*15;
}else{
document.getElementById(listid).style.overflowY="hidden";
document.getElementById(listid).style.height = num*22;
}
if(width<30){
document.getElementById(listid).style.width=200;
}
document.getElementById(obj).style.display="";

}

此函数可以根据自己的需要进行调节，
1，其中的15表示下拉列表最多显示的项目数，超过15就显示滚动条
2，30表示下拉项目最多字符数，如果有的项目超过超过了30个字符就让控件自适应，及可自动拉伸，如果小于30个字符，则控件长度显示wei200px（可自行调节，这样做是为了避免选项过短控件显示不够宽的情况）
3，参数num,width是需要经过计算之后才能确定的，所以此控件的使用还是有一定的局限性，如果有哪位能有好的办法让控件最小宽度固定（不用判断数据长度），并在文本过长的情况下自适应，欢迎讨论

最新更新
下列列表框模拟，附图片，功能介绍：
1，有下拉选择按钮，
2，选项文字长度超过控件长度时，控件自动拉伸。
3，项目数超过固定项目数时，会显示下拉列表框的滚动条。 

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<title></title>  
<style>  
.div_1{
height:100;
overflow-x:hidden;
overflow-y:scroll;
z-index:3;
}
.btn_1{
border:none;
background-image:url(but_out.jpg);
cursor:default;
width:16px;
height:18px;
background-repeat:no-repeat;
}

.btn_2{
border:none;
background-image:url(but_over.jpg);
cursor:default;
width:16px;
height:18px;
background-repeat:no-repeat;
}


.s_table_1{
BORDER:#7F9DB9 1px solid;
width:180px;
cursor:default;
}

.s_table_2{
top:0px;
width:100%;
border:none;
font-family:Arial, "ＭＳ Ｐゴシック",sans-serif;
font-size:12px;
cellPadding:0;
cellSpacing:0;
}


.tr_1{
width:178px;
cursor:default;
white-space:nowrap;
}

.text_1{
width:161px;
height:16px;
cursor:default;
BORDER:0px;
font-family:Arial, "ＭＳ Ｐゴシック",sans-serif;
font-size:12px;
}

.div_A{
position:relative
}

.div_B{
position:absolute;
left:0px;
top:0px;
}
</style>  
  
<script>  
var CBB_TEXTBOX = "_index";
var CBB_TEXTHIDDEN = "_no";
var CBB_SHOWDIV = "_showdiv";
var CBB_LISTDIV = "_listdiv";
var CBB_LISTTABLE = "_table";

function div_move_over(obj){
    document.getElementById(obj+CBB_TEXTBOX).onblur ="";
}
function div_move_out(obj){
    document.getElementById(obj+CBB_TEXTBOX).onblur =function anonymous(){hidden_listbox(obj+CBB_SHOWDIV)};
    document.getElementById(obj+CBB_TEXTBOX).focus();
}
function option_move_over(obj,objin){
    obj.background = "option_blue.jpg";
    obj.style.color = "#FFFFFF";
    document.getElementById(objin+CBB_TEXTBOX).onblur ="";
}

function option_move_out(obj,objin){
    obj.background = "";
    obj.style.color = "";
    document.getElementById(objin+CBB_TEXTBOX).onblur =function anonymous(){hidden_listbox(objtext+CBB_SHOWDIV);};
    document.getElementById(objin+CBB_TEXTBOX).focus();
}

function option_clicked(obj,objin){
    if(obj.firstChild){
        document.getElementById(objin+CBB_TEXTBOX).value=obj.firstChild.nodeValue;
        if(obj.value=='add'){
            document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].value = "";
            document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].id = "";
        }else{
            document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].value = obj.value;
            document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].id = obj.firstChild.nodeValue;
        }
    }else{
        document.getElementById(objin+CBB_TEXTBOX).value="";
        document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].value = "";
        document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].id = "";
    }
    document.getElementById(objin+CBB_SHOWDIV).style.display="none";
}

function show_listbox(obj){

    var trobj = document.getElementById(obj+CBB_LISTTABLE).rows;
    var rowsNum =trobj.length;
    var optionNum = 3;
    var optionHeigth = 16;
    document.getElementById(obj+CBB_LISTDIV).style.width=178;

    if(rowsNum>optionNum){
        document.getElementById(obj+CBB_LISTDIV).style.height = optionHeigth*optionNum;
    }else{
        document.getElementById(obj+CBB_LISTDIV).style.overflowY="hidden";
        document.getElementById(obj+CBB_LISTDIV).style.height = rowsNum*optionHeigth;
    }
    document.getElementById(obj+CBB_SHOWDIV).style.display="";
    document.getElementById(obj+CBB_TEXTBOX).focus();
}

function show_listbox(obj){
    var trobj = document.getElementById(obj+CBB_LISTTABLE).rows;
    var rowsNum =trobj.length;
    var optionWidth = 178;//项目宽度/下列列表框的默认宽度
    var optionNum = 3; //列表框最多可显示项目数
    var optionHeigth = 16;//项目的高度
    var roolBarWidth = 18;//纵向滚动条的宽度
    //var charSize = 6.2;//字符宽度，如需要精确计算宽度，可去掉注释。
    for(var i=0;i<rowsNum;i++){
        if(trobj[i].firstChild.firstChild){
            str = trobj[i].firstChild.firstChild.nodeValue;
           document.getElementById("p1").innerHTML = trobj[i].firstChild.firstChild.nodeValue;
           piwidth = document.getElementById("p1").offsetWidth+roolBarWidth;
           document.getElementById("p1").innerHTML ="";
       // if(piwidth<window.document.body.clientWidth){

           if(optionWidth<piwidth){
                optionWidth = piwidth;
                if(optionWidth>580){
                   len = 0;
                   for(j=0;j<str.length;j++)
                   {
                        iCode = str.charCodeAt(j);
                        if((iCode>=0 && iCode<=255)||(iCode>=0xff61 && iCode<=0xff9f)){
                            len += 1;
                        }
                        else{
                            len += 2;
                        }
                    }
                    if(len*charSize>optionWidth){
                        optionWidth = len*charSize;
                    }
                }
           }
        }
    }
    document.getElementById(obj+CBB_LISTDIV).style.width=optionWidth;

    if(rowsNum>optionNum){
        document.getElementById(obj+CBB_LISTDIV).style.height = optionHeigth*optionNum;
    }else{
        document.getElementById(obj+CBB_LISTDIV).style.overflowY="hidden";
        document.getElementById(obj+CBB_LISTDIV).style.height = rowsNum*optionHeigth;
    }
    document.getElementById(obj+CBB_SHOWDIV).style.display="";
    document.getElementById(obj+CBB_TEXTBOX).focus();
}
function hidden_listbox(divobj){
    document.getElementById(divobj).style.display="none";
}
function btn_over_img(obj){
obj.className ="btn_2";
}
function btn_out_img(obj){
obj.className ="btn_1";

}
</script>  
  
</head>  
<body >    
<span id="p1"></span>

******************************************************************************<p>

<table class='s_table_1' onclick="show_listbox('search');"  cellspacing=0 cellpadding=0 >
<tr><td><input type='text'  id='search_index' class='text_1' readOnly onclick="show_listbox('search');" onblur="hidden_listbox('search_showdiv')" value='selectedvalue'><input  type='button'  id='btna2' class='btn_1' onclick="show_listbox('search')" onmouseover='btn_over_img(this);'  onmouseout='btn_out_img(this);'><input type='hidden' name='search_no' value='selectedid' id='selectedvalue'><td></tr></table>
<div class='div_A' border=1 >
<div id='search_showdiv' class='div_B' style='display:none;border:1' onmouseover="div_move_over('search');" onmouseout="div_move_out('search');">
<table  border=0 cellspacing=0 cellpadding=1><tr><td bgcolor='#000000'>
<table  bgcolor='#FFFFFF' border=0 cellspacing=0 cellpadding=0><tr><td>
<div id='search_listdiv' class='div_1''>
<table id='search_table' class='s_table_2' cellspacing=0  cellpadding=0>
<!--select_top-->

<!--option-->
<tr class='tr_1' ><td style='white-space:nowrap;' height='16' value='1' onmouseover="option_move_over(this,'search');" onmouseout="option_move_out(this,'search')"  onclick ="option_clicked(this,'search');">1</td></tr>
<tr class='tr_1' ><td style='white-space:nowrap;' height='16' value='1' onmouseover="option_move_over(this,'search');" onmouseout="option_move_out(this,'search')"  onclick ="option_clicked(this,'search');">1</td></tr>
<tr class='tr_1' ><td style='white-space:nowrap;' height='16' value='1' onmouseover="option_move_over(this,'search');" onmouseout="option_move_out(this,'search')"  onclick ="option_clicked(this,'search');">1</td></tr>
<tr class='tr_1' ><td style='white-space:nowrap;' height='16' value='1' onmouseover="option_move_over(this,'search');" onmouseout="option_move_out(this,'search')"  onclick ="option_clicked(this,'search');">155555555555555555555555555555555555555555555555555555555</td></tr>
<!--option-->


</table></div></td></tr></table></td></tr></table></div></div>
</body>
</html>



有好的建议或者有疑问欢迎来函！
  • 大小: 37.8 KB
  • 大小: 770 Bytes
  • 大小: 786 Bytes
  • 大小: 677 Bytes
0
顶
0
踩
分享到：
css+js模拟可变长度下拉选择框/下拉选项长 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DIV+CSS+JS仿Select下拉表单

    【标题】"DIV+CSS+JS仿Select下拉表单"是前端开发中常见的一个技术实践，它旨在通过HTML的`&lt;div&gt;`元素、CSS样式和JavaScript脚本，实现一个功能与原生`&lt;select&gt;`标签类似的下拉选择器。这种自定义下拉表单在界面设计...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款美化表单下拉列表、复选框等的jquery combobox插件实例 30.站长必备jquery实现combox自动筛选,高亮显示功能 4)菜单 1.jquery+CSS超炫丽横向多级滑动导航菜单 2.jQuery+CSS漂亮蓝色三级菜单下载 3....

    div+css布局中常用方法汇总.pdf

    15. **代码命名约定**：例如，`search`代表搜索，`drop`表示下拉，`theme`代表主题，`tool/toolbar`表示工具栏，`cor/corner`表示转角或圆角，`layout`表示布局，`searchbox`是搜索框，`dropdownmenu`是下拉菜单，`...

    div+css布局中常用方法汇总.docx

    【div+css布局中常用方法】在网页设计中，Div+CSS布局是现代网页开发的基础，它通过HTML的div元素和CSS样式来控制页面布局，提供了更灵活、可维护性更强的设计方式。以下是一些在div+css布局中常用的技术和方法： 1...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -重新设计模拟树的下拉列表的实现，避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode，保持和...

    JavaScript模拟select

    本篇将深入探讨如何使用纯JavaScript来模拟一个自定义的下拉选择框（select控件）。通过这种方式，我们不仅能够提升用户体验，还能更好地控制界面的设计与行为。 #### 二、技术背景 本例使用的是早期的JavaScript...

    ExtAspNet_v2.3.2_dll

    -重新设计模拟树的下拉列表的实现，避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode，保持和...

    javascript代码常用大全

    TABLE相关(客户端动态增加行列，模拟进度条，滚动列表等) - 动态修改表格内容，以及通过表格实现进度条等效果。 #### 14. 各种 `&lt;object classid&gt;` 相关类，如播放器，flash与脚本互动等 - 利用 `&lt;object&gt;` 标签...

    select下拉js

    在网页设计中，`&lt;select&gt;`元素是HTML中用于创建下拉列表的标准方式，但它的样式受到浏览器默认样式的限制，不能很好地满足现代网页的视觉需求。为了实现自定义的下拉效果，开发者通常会使用JavaScript和CSS来模拟`...

    Extjs中文教程

    - **得到下拉列表框的值** - 通过监听事件或调用特定的方法可以获得用户选择的值。 - 如`comboBox.getValue()`方法。 #### 十、Ajax与ComboBox - **Ajax** - Ajax是一种使用JavaScript异步请求数据的技术。 - ...

    selenium基础

    - **下拉选择框(Select)**：使用`new Select(element).selectByVisibleText("Option")`来选择下拉列表中的选项。 - **单选项(RadioButton)**：通过`click()`方法进行选择。 - **多选项(Checkbox)**：同样使用`click...

    select 去样式美化（完美兼容）

    这样，开发者可以通过CSS对`div`进行完全定制，达到期望的视觉效果，而无需担心浏览器的默认样式冲突。 在实现过程中，可能采用了以下技术： 1. **JavaScript/jQuery**：由于`div`元素本身不具有`select`的下拉...

    仿select样式插件

    这类插件主要目标是通过JavaScript和CSS来模拟`&lt;select&gt;`的行为，提供更加灵活的样式定制能力。 仿select样式插件的工作原理通常是将`&lt;select&gt;`元素隐藏，然后使用`div`元素和自定义CSS来构建一个外观与`&lt;select&gt;`...

    jQuery Mobile快速入门234页完整版.pdf + 所有源码.zip

    2. **导航（Navigation）**：包括工具栏、按钮、下拉菜单等，提供清晰的导航结构。 3. **表单（Forms）**：提供了触摸友好的输入控件，如滑块、开关、日期选择器等。 4. **列表视图（Listviews）**：可以自定义项的...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    12.4.htm 通过下拉列表框来改变&lt;div&gt;容器的背景色 12.5.htm 实演示如何创建CSS文件 12.6.htm 演示一个在网页中应用投影的范例 12.7.htm 使用Ajax动态改变局部元素样式 CSSmenu ...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例164 应用下拉列表选择所要联机的网站 196 实例165 可输入字符的下拉菜单 197 实例166 设置下拉列表的默认值 198 实例167 设置下拉列表的样式 199 实例168 下拉列表打开窗口 200 实例169 Tab键在文本域中的体现 ...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例164 应用下拉列表选择所要联机的网站 196 实例165 可输入字符的下拉菜单 197 实例166 设置下拉列表的默认值 198 实例167 设置下拉列表的样式 199 实例168 下拉列表打开窗口 200 实例169 Tab键在文本域中的体现 ...

    Selenium Python Bindings 2017年 新版 原版

    Selenium 还提供了一些工具类来辅助测试，如 `Select` 用于处理下拉列表： ```python from selenium.webdriver.support.ui import Select dropdown = Select(driver.find_element_by_id("select")) dropdown....

    Python selenium爬取微博数据代码实例

    此函数通过循环发送`Keys.END`命令模拟鼠标滚轮下拉操作，每次发送后等待1秒，以确保页面能够完全加载。 ##### 5. 获取微博数据 ```python def get_data(): # CSS选择器定义 card_sel = 'div.WB_cardwrap.WB_...

    ASP.NET的网页代码模型及生命周期

    在创建时，去掉【将代码放在单独的文件中】复选框的选择即可创建单文件页模型的ASP.NET文件。创建后文件会自动创建相应的HTML代码以便页面的初始化，示例代码如下所示。 “C#” %&gt; &lt;!DOCTYPE html PUBLIC “-//W3C/...

Magicbox
Global site tag (gtag.js) - Google Analytics