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中的html(),text(),val()区别
Sep 01 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 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模式设计之观察者模式应用实例分析
2019/09/25 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
浅析Python四种数据类型
2018/09/26 Python
python实现简单名片管理系统
2018/11/30 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
详解python中docx库的安装过程
2019/11/08 Python
python 导入数据及作图的实现
2019/12/03 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
Python如何对齐字符串
2020/07/30 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
自荐信结尾
2013/10/27 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
2014年老干部工作总结
2014/11/21 职场文书
技术股东合作协议书
2014/12/02 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
Pandas-DataFrame知识点汇总
2022/03/16 Python