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


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中的window.event.keyCode使用介绍
Apr 26 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
AngularJS实现多级下拉框
Mar 25 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
PHP5 安装方法
2006/10/09 PHP
php的大小写敏感问题整理
2011/12/29 PHP
Destoon模板制作简明教程
2014/06/20 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
python多线程抽象编程模型详解
2019/03/20 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
Keras搭建自编码器操作
2020/07/03 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
Python collections模块的使用方法
2020/10/09 Python
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
无故旷工检讨书
2014/01/26 职场文书
元旦晚会邀请函
2014/01/27 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
股东出资证明书范例
2014/10/04 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
社区工作者个人总结
2015/02/28 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
SSM VUE Axios详解
2021/10/05 Vue.js
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python