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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
vue.js开发环境搭建教程
May 04 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
php使用正则验证中文
2016/04/06 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
python线程池如何使用
2020/05/28 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
主办会计岗位职责
2014/03/13 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
刑事法律意见书
2015/06/04 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS