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


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 到 JQuery (1)学习小结
Feb 12 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
layui之select的option叠加问题的解决方法
Mar 08 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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
Node爬取大批量文件的方法示例
2019/06/28 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python fileinput模块使用实例
2015/06/03 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
2014年业务工作总结
2014/11/17 职场文书
服务明星事迹材料
2014/12/29 职场文书
关于学习的决心书
2015/02/05 职场文书
赢在执行观后感
2015/06/16 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python