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 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
node.js express框架简介与实现
Jul 23 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
如何开发一个虚拟域名系统
2006/10/09 PHP
PHP 采集获取指定网址的内容
2010/01/05 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
js post方式传递提交的实现代码
2010/05/31 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
大学生个人简历自我评价
2013/11/16 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
工作试用期自我评价
2015/03/10 职场文书
单位工资证明范本
2015/06/12 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书