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代码
Dec 04 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
javascript回调函数的概念理解与用法分析
May 27 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
微信小程序上传图片实例
May 28 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
js实现简单进度条效果
Mar 25 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 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
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
JavaScript 数组运用实现代码
2010/04/13 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python3处理含有中文的url方法
2018/05/10 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
经济系大学生求职信
2013/10/01 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
体育教师自我鉴定
2014/02/12 职场文书
施工安全汇报材料
2014/08/17 职场文书
2014最新离职证明范本
2014/09/12 职场文书
护理专业自我评价
2015/03/11 职场文书
如何写新闻稿
2015/07/18 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers