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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
javascript 新浪背投广告实现代码
Jul 07 Javascript
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
node.js实现带进度条的多文件上传
Mar 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 输出简单动态WAP页面
2009/06/09 PHP
来自phpguru得Php Cache类源码
2010/04/15 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
初三物理教学反思
2014/01/21 职场文书
四查四看整改措施
2014/09/19 职场文书
保安2014年终工作总结
2014/12/06 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python