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 插件 将this下的div轮番显示
Apr 09 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 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批量生成随机用户名
2008/07/10 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
菜鸟javascript基础资料整理2
2010/12/06 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
椰子猫砂:CatSpot
2018/08/27 全球购物
高分子材料与工程专业推荐信
2013/12/01 职场文书
犯错检讨书
2014/02/21 职场文书
如何写早恋检讨书
2014/09/10 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
MySQL分区路径子分区再分区
2022/04/13 MySQL