可选择和输入的下拉列表框示例


Posted in Javascript onNovember 05, 2013
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>可选择和输入的下拉列表框</title> 
<style type="text/css"> 
div,span,p,td,font{font-size:9pt;} 
</style> 
</head> 
<body> <table cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td align="left"> 
<!--select标签和input外面的span标签的格式是为了使两个位置在同一位置,控制位置--> 
<span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);"> 
<select name="aabb" id="aabb" style="width:190px;height:20px;margin:-2px;" 
onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;"> 
<!--下面的option的样式是为了使字体为灰色,只是视觉问题,看起来像是注释一样--> 
<option value="" style="color:#c2c2c2;">---请选择---</option> 
<option value="闲人书库">闲人书库</option> 
<option value="闲人BLOG">闲人BLOG</option> 
<option value="闲人设计">闲人设计</option> 
<option value="闲人软件">闲人软件</option> 
</select> 
</span> 
<span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;"> 
<input type="text" name="ccdd" id="ccdd" value="可选择也可输入的下拉框" style="width:170px;height:15px;border:0pt;"> 
</span> 
</td></tr></table> 
</body> 
</html>

注意注释的位置。
Javascript 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
vue实现百度搜索功能
Dec 28 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
js函数返回多个返回值的示例代码
Nov 05 #Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 #Javascript
查看大图功能代码jquery版
Nov 05 #Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 #Javascript
iframe子页面获取父页面元素的方法
Nov 05 #Javascript
jquery统计复选框选中示例
Nov 05 #Javascript
jquery实现滑动图片自己测试的例子
Nov 05 #Javascript
You might like
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
python tkinter界面居中显示的方法
2018/10/11 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
python属于哪种语言
2020/08/16 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
平面设计岗位职责
2013/12/14 职场文书
运动会领导邀请函
2014/01/10 职场文书
班主任对学生的评语
2014/04/26 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
教师个人成长总结
2015/02/11 职场文书
电影开国大典观后感
2015/06/04 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书