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


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获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 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
用 php 编写的日历
2006/10/09 PHP
推荐php模板技术[转]
2007/01/04 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
php数组编码转换示例详解
2014/03/11 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python2随机数列生成器简单实例
2017/09/04 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
幼儿园园长自我鉴定
2013/10/22 职场文书
学年末自我鉴定
2014/01/21 职场文书
战友聚会主持词
2014/04/02 职场文书
战略合作协议书范本
2014/04/18 职场文书
学期评语大全
2014/04/30 职场文书
以权谋私检举信范文
2015/03/02 职场文书
大国崛起观后感
2015/06/02 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js