JavaScript通過select動態(tài)更換圖片的方法
本文實例講述了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程序設(shè)計有所幫助。
- javascript數(shù)組去重的六種方法匯總
- javascript實現(xiàn)數(shù)組中的內(nèi)容隨機輸出
- JavaScript數(shù)組對象賦值用法實例
- JavaScript數(shù)組各種常見用法實例分析
- 淺談Javascript數(shù)組的使用
- javascript數(shù)組排序匯總
- javascript中數(shù)組方法匯總
- javascript實現(xiàn)無限級select聯(lián)動菜單
- javascript模擬select,jselect的方法實現(xiàn)
- JavaScript實現(xiàn)將數(shù)組數(shù)據(jù)添加到Select下拉框的方法
相關(guān)文章
JS+CSS實現(xiàn)帶有碰撞緩沖效果的豎向?qū)Ш綏l代碼
這篇文章主要介紹了JS+CSS實現(xiàn)帶有碰撞緩沖效果的豎向?qū)Ш綏l代碼,可實現(xiàn)滑塊彈性振動效果的導(dǎo)航效果,涉及jQuery數(shù)學(xué)運算及頁面元素樣式的動態(tài)操作技巧,需要的朋友可以參考下2015-09-09webpack3里使用uglifyjs壓縮js時打包報錯的解決
這篇文章主要介紹了webpack3里使用uglifyjs壓縮js時打包報錯的解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12解析dom中的children對象數(shù)組元素firstChild,lastChild的使用
以下是對dom中的children對象數(shù)組元素firstChild,lastChild的使用進行了詳細的分析介紹,需要的朋友可以參考下2013-07-07JavaScript實現(xiàn)html轉(zhuǎn)pdf的三種方法詳解
近期項目需要實現(xiàn)將?html?頁面轉(zhuǎn)換成?pdf?報告的需求,經(jīng)過一番調(diào)研以及結(jié)合過往經(jīng)驗,發(fā)現(xiàn)了三種技術(shù)方案,下面我們就來看看它們的具體實現(xiàn)步驟吧2024-02-02原生JS實現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法
這篇文章主要介紹了原生JS實現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法,涉及javascript動態(tài)創(chuàng)建頁面元素、事件監(jiān)聽、回調(diào)函數(shù)使用等相關(guān)操作技巧,需要的朋友可以參考下2018-09-09