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


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 相关文章推荐
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
浅谈javascript错误处理
Aug 11 Javascript
让JavaScript代码更加精简的方法技巧
Jun 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
10个简化PHP开发的工具
2014/12/25 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
javascript常用方法总结
2015/05/14 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
解析Python的缩进规则的使用
2019/01/16 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
大专毕业生简历的自我评价
2013/10/20 职场文书
高级工程师岗位职责
2013/12/15 职场文书
反邪教警示教育方案
2014/05/13 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
自我评价优缺点范文
2015/03/11 职场文书
学校运动会感想
2015/08/10 职场文书
大学班长竞选稿
2015/11/20 职场文书
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers