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 Select标记中options操作方法集合
Oct 22 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
深入理解React高阶组件
2017/09/28 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
python 画图 图例自由定义方式
2020/04/17 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
数控专业个人求职信范例
2013/11/29 职场文书
教师自我评价范文
2013/12/16 职场文书
爱情寄语大全
2014/04/09 职场文书
安全标语口号
2014/06/09 职场文书
婚前协议书范本两则
2014/10/16 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
数学教师个人总结
2015/02/06 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server