JavaScript通过select动态更换图片的方法


Posted in Javascript onMarch 23, 2015

本文实例讲述了JavaScript通过select动态更换图片的方法。分享给大家供大家参考。具体分析如下:

下面的JS代码在select列表变化时触发SetBeerIcon()函数,SetBeerIcon()函数可以根据select选择的值动态修改图片

...
<script language="JavaScript" type="text/javascript" >
function setBeerIcon() {
 var beerIcon = document.getElementById("beerIcon");
 beerIcon.src = "images/"+getSelectValue("beer")+".jpg";
}
</script>
...
<img border="0" src="" id="brandIcon" alt="brand" />
<select name="beer" id="beer" onChange="setButton();setBeerIcon();">
<option value="--Select--">Select beer</option>
  <option value="heineken">heineken</option>
  <option value="sol">sol</option>
  <option value="amstellight">amstellight</option>
  <option value="coronalight">coronalight</option>
  <option value="coronaextra">coronaextra</option>
  <option value=""></option>
</select>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
js实现随机点名小功能
Aug 17 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 #Javascript
浅谈jQuery中的事件
Mar 23 #Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 #Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 #Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 #Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 #Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 #Javascript
You might like
php 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
javascript天然的迭代器
2010/10/29 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
委托书样本
2014/04/02 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
补充协议书
2015/01/28 职场文书
检讨书范文
2019/04/16 职场文书
Python实现byte转integer
2021/06/03 Python
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL