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 相关文章推荐
JavaScript 获取事件对象的注意点
Jul 29 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
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
详解PHP中的PDO类
2015/07/06 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
jQuery选择器实例应用
2017/01/05 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
python matplotlib库的基本使用
2020/09/23 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
中药学专业求职信
2014/05/31 职场文书
活着观后感
2015/06/03 职场文书
党员读书活动心得体会
2016/01/14 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
使用Django框架创建项目
2022/06/10 Python