JavaScript通过select动态更换图片的方法
更新时间：2015年03月23日 09:10:04 作者：work24
这篇文章主要介绍了JavaScript通过select动态更换图片的方法,涉及javascript动态操作图片src的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
本文给大家介绍Bootstrap 对图片的支持，Bootstrap提供了四个可对图片应用简单样式的class，对Bootstrap四种图片class相关知识感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了JavaScript屏蔽Backspace键的实现代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-11-11
在本篇文章里小编给大家分享了关于js中怎么判断两个字符串相等的实例和代码，需要的朋友们学习参考下。2019-01-01
这篇文章主要介绍了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-01-01
本文是一个学习javascript的新手总结的一些关于javascript的方法，有需要的小伙伴可以参考下。2015-07-07
直接从qq上获取到奥运金牌的数量的代码2008-08-08
这篇文章主要介绍了js模仿java的Map集合的相关资料，Java中某些最常用的集合类是List和Map，感兴趣的小伙伴们可以了解一下2016-01-01
这篇文章主要介绍了如何利用JavaScript 实现继承，JavaScript 在编程语言界是个特殊种类，它和其他编程语言很不一样，JavaScript可以在运行的时候动态地改变某个变量的类型,下面小编将继续介绍JavaScript如何实现继承,需要的朋友可以参考下2022-02-02
这篇文章介绍了Webpack4.x的四个核心概念介绍，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
这篇文章主要介绍了微信小程序实现点击按钮修改文字大小功能,涉及微信小程序事件绑定及setData动态修改Page页面data数据,进而控制页面元素属性动态改变的相关操作技巧,需要的朋友可以参考下2017-12-12
最新评论