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


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 相关文章推荐
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
起点页面传值js,有空研究学习下
Jan 25 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python转码问题的解决方法
2008/10/07 Python
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
PyQt5每天必学之组合框
2018/04/20 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
python numpy实现rolling滚动案例
2020/06/08 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
C语言50道问题
2014/10/23 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
新闻专业本科生的自我评价分享
2013/11/20 职场文书
工程部经理岗位职责
2013/12/08 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
素质拓展训练感想
2015/08/07 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
Python 数据可视化之Seaborn详解
2021/11/02 Python
使用CSS连接数据库的方式
2022/02/28 HTML / CSS