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与Prototype并存的冲突的解决方法
Aug 29 Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
Node.js的特点详解
Feb 03 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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
php5.5新数组函数array_column使用
2013/07/08 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
PHP SOCKET编程详解
2015/05/22 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
Python读取word文本操作详解
2018/01/22 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
python基于opencv 实现图像时钟
2021/01/04 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
先进党支部事迹材料
2014/01/13 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
家长寄语大全
2014/04/02 职场文书
工地宣传标语
2014/06/18 职场文书
租赁协议书
2015/01/27 职场文书
幼儿教师个人总结
2015/02/05 职场文书
2015年重阳节主持词
2015/07/04 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
vue使用element-ui按需引入
2022/05/20 Vue.js