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使用prototype定义对象类型
Feb 07 Javascript
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
event对象的方法 兼容多浏览器
Jun 27 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
React组件生命周期详解
Jul 03 Javascript
vue的列表交错过渡实现代码示例
May 05 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python Flask实现restful api service
2017/12/04 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
村级环境卫生整治方案
2014/05/04 职场文书
防汛通知
2015/04/25 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript