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 相关文章推荐
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
详解Vue单元测试case写法
May 24 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
React实现评论的添加和删除
Oct 20 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 Sql Server连接失败问题及解决办法
2009/08/07 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
PDO::query讲解
2019/01/29 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
百丽国际旗下购物网站:优购
2017/02/28 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
自荐书模板
2013/12/15 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
青蓝工程实施方案
2014/03/27 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
出差报告怎么写
2014/11/06 职场文书
英文产品推荐信
2015/03/27 职场文书