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


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 相关文章推荐
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
JQuery animate动画应用示例
May 14 jQuery
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
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的ajax框架xajax入门与试用介绍
2010/12/19 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
Angular 数据请求的实现方法
2018/05/07 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
法学院方阵解说词
2014/01/29 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
领导失职检讨书
2014/02/24 职场文书
任命书模板
2014/06/04 职场文书
理发店策划方案
2014/06/05 职场文书
大学生就业求职信
2014/06/12 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
小学教师工作总结2015
2015/04/07 职场文书
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python