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


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快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 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
十大“创意”战术!
2020/03/04 星际争霸
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
python实现网站的模拟登录
2016/01/04 Python
Python中文编码知识点
2019/02/18 Python
python try 异常处理(史上最全)
2019/03/07 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
Sony C++笔试题
2013/03/10 面试题
.NET面试题:什么是反射
2016/09/30 面试题
学习十八大报告感言
2014/02/04 职场文书
招标承诺书
2014/08/30 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
大学生团员个人总结
2015/02/14 职场文书
会计求职自荐信
2015/03/26 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
大学体育课感想
2015/08/10 职场文书
《我的长生果》教学反思
2016/02/20 职场文书