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


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 相关文章推荐
图片之间的切换
Jun 26 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
jquery实现倒计时效果
Dec 14 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
jQuery Ajax全解析
Feb 13 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
浅谈React之状态(State)
Sep 19 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 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之第四天
2006/10/09 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
jQuery live
2009/05/15 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
Node.js事件驱动
2015/06/18 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
Vue实现简易计算器
2020/02/25 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
自荐信结尾
2013/10/27 职场文书
新员工欢迎词
2014/01/12 职场文书
项目总经理岗位职责
2014/02/14 职场文书
团日活动总结书
2014/05/08 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
Oracle 多表查询基本语法实例
2022/04/18 Oracle