JS+DIV+CSS实现仿表单下拉列表效果

本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果。分享给大家供大家参考。具体如下：

JS+DIV+CSS实现仿表单下拉列表效果，是完全用CSS技术再配合JS实现的效果，用来代替传统的Select下拉框，虽然目前来说，此代码还有些粗糙，但对于美化列表的样式来说，可能以后会更方便，要比Select方便的多。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-div-css-fselect-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS+JS仿下拉表单</title>
<script type="text/javascript" >
function $$$$$(_sId){
 return document.getElementById(_sId);
 }
function hide(_sId)
 {$$$$$(_sId).style.display = $$$$$(_sId).style.display == "none" ? "" : "none";}
function pick(v) {
 document.getElementById('am').value=v;
hide('HMF-1')
}
function bgcolor(id){
 document.getElementById(id).style.background="#F7FFFA";
 document.getElementById(id).style.color="#000";
}
function nocolor(id){
 document.getElementById(id).style.background="";
 document.getElementById(id).style.color="#788F72";
}
</script>
<style type="text/css">
*{margin:0px; padding:0px;}
body{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}
.cur{cursor:pointer; display:block;color:#788F72;width:146px; height:22px; line-height:22px; padding:0px 0px 0px 2px;}
.am{border: 0px;color:#788F72;cursor: pointer;background:#fff url('0.gif') no-repeat; width: 150px;height: 19px;margin:10px 0px 0px 10px; padding:3px 0px 0px 2px;}
.bm{border: 1px #999999 solid ;width: 148px; margin-left:10px;}
</style>
</head>
<body>
<form>
<input onclick="hide('HMF-1')" type="text" value="请选择" id="am" class="am" />
<div id="HMF-1" style="display: none " class="bm">
 <span id="a1" onclick="pick('ASP')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">ASP</span>
 <span id="a2" onclick="pick('PHP')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">PHP</span>
 <span id="a3" onclick="pick('JSP')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">JSP</span>
 <span id="a4" onclick="pick('ASP.NET')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">ASP.NET</span>
 <span id="a5" onclick="pick('JAVA')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">JAVA</span>
 <span id="a6" onclick="pick('DELPHI')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">DELPHI</span>
</div>
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JS+CSS实现下拉列表框美化效果（3款）

    JS+CSS实现下拉列表框美化效果（3款）

    本文实例讲述了JS+CSS实现美化的下拉列表框效果.分享给大家供大家参考.具体如下: 三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图: 效果查看 源码下载 具体代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> &

  • javascript如何操作HTML下拉列表标签

    先给大家讲下大概实现思路,具体内容介绍请看下面. 判断select选项中 是否存在Value="paraValue"的Item 向select选项中 加入一个Item 从select选项中 删除一个Item 删除select中选中的项 修改select选项中 value="paraValue"的text为"paraText" 设置select中text="paraText"的第一个Item为选中 设置select中value=

  • JS显示下拉列表框内全部元素的方法

    本文实例讲述了JS显示下拉列表框内全部元素的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以通过alert框显示指定下拉列表的全部元素 <!DOCTYPE html> <html> <head> <script> function getOptions() { var x=document.getElementById("mySelect"); var txt="All options: "; var i;

  • js实现下拉列表选中某个值的方法(3种方法)

    本文实例讲述了js实现下拉列表选中某个值的方法.分享给大家供大家参考,具体如下: 方法1: <select id="aa"> <option>1</option> <option>2</option> </select> <input type="button" value=" 选中" onclick="checkOption()" /> &l

  • extJs 文本框后面加上说明文字+下拉列表选中值后触发事件

    复制代码 代码如下: var showForm; function panelShowForm() { showForm=null; showForm = new Ext.FormPanel({ renderTo:"showPanel", region:'north', border:false, bodyBorder:false, frame:true, waitMsgTarget: true, labelAlign:'right', id:"showForm",

  • JS+CSS实现美化的下拉列表框效果

    JS+CSS实现美化的下拉列表框效果

    本文实例讲述了JS+CSS实现美化的下拉列表框效果.分享给大家供大家参考.具体如下: 一款经过JS+CSS美化的下拉列表,效果很不错,但代码有点偏多,学习CSS的朋友可以学习一下方法,然后自己变通一下,把代码简化一下. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

  • JS获取下拉列表所选中的TEXT和Value的实现代码

    如下所示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=

  • jQuery实现在下拉列表选择时获取json数据的方法

    本文实例讲述了jQuery实现在下拉列表选择时获取json数据的方法.分享给大家供大家参考.具体如下: function populateDropDown() { $.getJSON('/getData.aspx',{Name:$('#parm').val()},function(data){ var select = $('#DDLControl'); var options = select.attr('options'); $('option', select).remove(); $.e

  • javascript下拉列表中显示树形菜单的实现方法

    javascript下拉列表中显示树形菜单的实现方法

    很简单的一个使用:点击菜单,能够显示下面的或者不显示. 1.主要目的:展现的是的一个菜单项,然后点击一下,隐藏,点一下,弹出下面的内容 用到的是 overflow:hidden    和  overflow="visible"这两个属性 在点击的function中,设置属性应该 node.style.overflow="visible";当然设置tr的高度也是很重要的,要恰好让其他的选项隐蔽 2.采用同样的技术,多加几个,但是就是传参数比较麻烦,采用this传参很常

  • JS实现支持多选的遍历下拉列表代码

    JS实现支持多选的遍历下拉列表代码

    本文实例讲述了JS实现支持多选的遍历下拉列表.分享给大家供大家参考.具体如下: 这里使用js实现可进行多项选择的下拉列表,鼠标点击上边下拉列表中的任意值,下边列表中就会显示该选中值,按住键盘上的Ctrl键,再次点击上边的列表任意值,可进行多选,多选功能得益于JavaScript的帮忙,在网页上这种应用挺广泛,有必要看一看. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-option-cha-codes/ 具体代码如下: <!

  • javascript下拉列表菜单的实现方法

    javascript下拉列表菜单的实现方法

    之前写过这个<javascript下拉列表中显示树形菜单的实现方法>菜单的体现,但是在写了之后就发现了,不太适合,高度要精准控制,并且还不是很好看.现在采用table来封装,我们知道table的每一行写满了之后,下一行会自动加,这个比之前我们自己制定高度好很多. 1.点击之后都可以并存的情况(只需函数写法不一样就可) dispaly也是自己设置的,通过父节点来操作子节点,显示与否: /* function open1(node){ //通过父节点来操作兄弟节点 当点击之后出现之后,直接就能打开

随机推荐