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


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 相关文章推荐
javascript调试说明
Jun 07 Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
小议Javascript中的this指针
2010/03/18 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
python操作excel让工作自动化
2019/08/09 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
python 装饰器的基本使用
2021/01/13 Python
管理科学大学生求职信
2013/11/13 职场文书
工业学校毕业生自荐信范文
2014/01/03 职场文书
教师旷工检讨书
2014/01/18 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
使用 Apache 反向代理的设置技巧
2022/01/18 Servers