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 空位补零实现代码
Feb 26 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 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学习教程之第2天
2008/06/15 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
php修改数组键名的方法示例
2017/04/15 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
使用python实现语音文件的特征提取方法
2019/01/09 Python
Python识别验证码的实现示例
2020/09/30 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
中餐厅经理岗位职责
2014/04/11 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python