JS实现下拉菜单赋值到文本框的方法


Posted in Javascript onAugust 18, 2015

本文实例讲述了JS实现下拉菜单赋值到文本框的方法。分享给大家供大家参考。具体如下:

这里演示下拉菜单和文本框构建的介绍栏,将Select框中的值定位到INPUT文本输入框中,是下拉框赋值到文本框的实例,上网时候貌似经常见的功能,只是不知如何形容,或许叫做联动吧。

运行效果如下图所示:

JS实现下拉菜单赋值到文本框的方法

在线演示地址如下:

具体代码如下:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin  
var messages = new Array(); 
messages[0] = ""; //这里写入每个选项对应的说明文字
messages[1] = "https://3water.com";
messages[2] = "http://www.163.com";  
messages[3] = "http://cn.yahoo.com";
//根据需要,这里应该随着选项的改变而增减项目
function messageReveal() { 
var messageindex = document.messageForm.messagePick.selectedIndex;
//取得当前下拉菜单选定项目的序号
helpmsg = messages[messageindex];
//根据序号取得当前选项的说明
document.messageForm.messageField.value = helpmsg
//将说明写进文框
}
// End -->
</SCRIPT>
<title>下拉菜单和文本框构建的介绍栏</title>
</head>
<body>
<form name="messageForm">
<select name="messagePick" OnChange="messageReveal()">
<option value="0">请在这里选择需要咨询的信息
<option>三水点靠木
<option>网易163
<option>中文雅虎
</select>
<br><br><br><br><br>
<input name="messageField" type="text" style="overflow:auto" />
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
JS求平均值的小例子
Nov 29 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
React实现全选功能
Aug 25 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 Javascript
JS实现可调整倒计时间代码分享
Aug 18 #Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 #Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 #Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 #Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 #Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 #Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 #Javascript
You might like
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
用jscript启动sqlserver
2007/06/21 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
JS作用域深度解析
2016/12/29 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
DOM事件探秘篇
2017/02/15 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
Pandas的数据过滤实现
2021/01/15 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
奖励通知
2015/04/22 职场文书
企业宣传稿范文
2015/07/23 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
导游词之唐山景点
2019/12/18 职场文书