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


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中的noscript元素属性位置及作用介绍
Apr 11 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
3种vue组件的书写形式
Nov 29 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 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图片加水印原理(超简单的实例代码)
2013/01/18 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
详解vue axios中文文档
2017/09/12 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
python函数局部变量用法实例分析
2015/08/04 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
Python删除n行后的其他行方法
2019/01/28 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
业务经理的岗位职责
2013/11/16 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
法制教育主题班会
2015/08/13 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL