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 相关文章推荐
编写Js代码要注意的几条规则
Sep 10 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
JS三级联动代码格式实例详解
Dec 30 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用header函数实现301跳转代码实例
2013/11/25 PHP
PHP中的日期加减方法示例
2014/08/21 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
python简单实现基数排序算法
2015/05/16 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
网络工程师的自我评价
2013/10/02 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
入党自荐书范文
2014/03/09 职场文书
婚前协议书范本
2014/04/15 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang
Win2008系统搭建DHCP服务器
2022/06/25 Servers
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers