JavaScript通過select動態(tài)更換圖片的方法

更新時間：2015年03月23日 09:10:04 作者：work24

這篇文章主要介紹了JavaScript通過select動態(tài)更換圖片的方法,涉及javascript動態(tài)操作圖片src的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JavaScript通過select動態(tài)更換圖片的方法。分享給大家供大家參考。具體分析如下：

下面的JS代碼在select列表變化時觸發(fā)SetBeerIcon()函數(shù)，SetBeerIcon()函數(shù)可以根據(jù)select選擇的值動態(tài)修改圖片

...
<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 模塊化編程(筆記) ,需要的朋友可以參考下
2015-04-04
JS判斷用戶用的哪個瀏覽器實例詳解
這篇文章主要介紹了JS判斷用戶用的哪個瀏覽器的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-10-10
js取得html iframe中的元素和變量值
想要取得iframe中的元素和js變量值，不能用$(document).ready()方法，而是要用$("#iframeId").load()方法
2014-06-06
JavaScript自定義事件介紹
很多DOM對象都有原生的事件支持，向div就有click、mouseover等事件，事件機制可以為類的設計帶來很大的靈活性，相信.net程序員深有體會。隨著web技術發(fā)展，使用JavaScript自定義對象愈發(fā)頻繁，讓自己創(chuàng)建的對象也有事件機制，通過事件對外通信，能夠極大提高開發(fā)效率
2013-08-08
three.js 入門案例詳解
本篇文章主要介紹了three.js 入門案例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
8 個有用的JS技巧(推薦)
這篇文章主要介紹了8 個有用的JS技巧(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-07-07
JS中null和undefined的區(qū)別
在JavaScript中，null和undefined是兩個常見的數(shù)據(jù)類型，本文就詳細的介紹了JS中null和undefined的區(qū)別，感興趣的可以了解一下
2023-05-05
微信小程序日歷/日期選擇插件使用方法詳解
這篇文章主要為大家詳細介紹了微信小程序日歷和日期選擇插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
JavaScript實現(xiàn)同步于本地時間的動態(tài)時間顯示方法
這篇文章主要介紹了JavaScript實現(xiàn)同步于本地時間的動態(tài)時間顯示方法,實例分析了javascript獲取本地時間及動態(tài)顯示的技巧,并對實現(xiàn)代碼進行了較為詳盡的分析說明,需要的朋友可以參考下
2015-02-02
手寫的一個兼容各種瀏覽器的javascript getStyle函數(shù)(獲取元素的樣式)
這篇文章主要介紹了手寫的一個兼容各種瀏覽器的javascript getStyle函數(shù),用來取元素的樣式,需要的朋友可以參考下
2014-06-06