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 相关文章推荐
jQuery Ajax之load()方法
Oct 12 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
深入了解JavaScript 防抖和节流
Sep 12 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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
PHP4中实现动态代理
2006/10/09 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
python批量替换多文件字符串问题详解
2018/04/22 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
Python必须了解的35个关键词
2020/07/16 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
化工机械应届生求职信
2013/11/04 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
爱国演讲稿400字
2014/05/07 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
项目合作意向书模板
2014/07/29 职场文书
单位未婚证明范本
2014/11/25 职场文书
教师年度个人总结
2015/02/11 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS