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 定义初始化数组函数
Sep 07 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
清空上传控件input file的值
Jul 03 Javascript
javascript屏蔽右键代码
May 15 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
Element UI框架中巧用树选择器的实现
Dec 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
根德YB400的电路分析
2021/03/02 无线电
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
python中元类用法实例
2014/10/10 Python
python版本单链表实现代码
2018/09/28 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
大学生求职简历的自我评价
2013/10/21 职场文书
关于青春的演讲稿
2014/05/05 职场文书
维稳工作承诺书
2015/01/20 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python