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 词法作用域和闭包分析说明
Aug 12 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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通用分页类page.php[仿google分页]
2008/08/31 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
python 整数越界问题详解
2019/06/27 Python
Python异常处理例题整理
2019/07/07 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
专业销售业务员求职信
2013/11/18 职场文书
实习单位接收函
2014/01/11 职场文书
火车来了教学反思
2014/02/11 职场文书
小学见习报告
2014/10/31 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL