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入门教程(6) Window窗口对象
Jan 31 Javascript
DWR Ext 加载数据
Mar 22 Javascript
js工具方法弹出蒙版
May 08 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
比较node.js和Deno
Apr 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
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Django中Forms的使用代码解析
2018/02/10 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
工作表现自我评价
2014/02/08 职场文书
青年文明号复核材料
2014/02/11 职场文书
个人授权委托书范本格式
2014/10/12 职场文书