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]点出统计器
Oct 11 Javascript
JavaScript For Beginners(转载)
Jan 05 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 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 防恶意刷新实现代码
2010/05/16 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
使用正则替换变量
2007/05/05 Javascript
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
js获取内联样式的方法
2015/01/27 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Python实现句子翻译功能
2017/11/14 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
wxPython实现分隔窗口
2019/11/19 Python
django 取消csrf限制的实例
2020/03/13 Python
Python如何实现的二分查找算法
2020/05/27 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
2014年预算员工作总结
2014/12/05 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
PyTorch 如何自动计算梯度
2021/05/23 Python
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android