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 相关文章推荐
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
antd配置config-overrides.js文件的操作
Oct 31 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
PHP之变量、常量学习笔记
2008/03/27 PHP
php编程每天必学之验证码
2016/03/03 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
vue移动端使用canvas签名的实现
2020/01/15 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
Python基于有道实现英汉字典功能
2015/07/25 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python实现KNN分类算法
2019/10/16 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
python有几个版本
2020/06/17 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
护理职业应聘自荐书
2013/09/29 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
大学生秋游活动方案
2014/02/17 职场文书
求职自我推荐信
2015/03/24 职场文书
联谊活动总结范文
2015/05/09 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
Python类方法总结讲解
2021/07/26 Python
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
golang连接MySQl使用sqlx库
2022/04/14 Golang