這里演示js實(shí)現(xiàn)Select頭像選擇，實(shí)時(shí)預(yù)覽效果，在留言或評(píng)論的時(shí)候，讓用戶簡(jiǎn)易的選擇頭像，以前最常見的方式是使用單選框，當(dāng)然使用其它的形式也可以，比如今天這個(gè)Select，下拉選框選擇頭像，也是不錯(cuò)的體驗(yàn)。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-select-ico-pic-view-codes/

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>select頭像選擇代碼</title>
</head>
<body>
<select name=lanrentuku onchange="document.images['idface'].src=options[selectedIndex].value;">
<option value="images/ico1.gif" >頭像01</option>
<option value="images/ico2.gif" >頭像02</option>
<option value="images/ico3.gif" >頭像03</option>
</select>  
<div style="position:absolute;"><img src="images/ico1.gif" id=idface></div>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

DOM節(jié)點(diǎn)的替換或修改函數(shù)replaceChild()用法實(shí)例
這篇文章主要介紹了DOM節(jié)點(diǎn)的替換或修改函數(shù)replaceChild()用法,實(shí)例分析了replaceChild()替換DOM節(jié)點(diǎn)的使用技巧,需要的朋友可以參考下
2015-01-01
提交表單時(shí)執(zhí)行func方法實(shí)現(xiàn)代碼
客戶端的js驗(yàn)證想必大家早已熟悉，今天本文帶著大家再回憶一下，主要是在提交表單之前執(zhí)行func方法，感興趣的你可以參考下哈，希望可以幫助到你
2013-03-03
js格式化時(shí)間的方法
這篇文章主要介紹了js格式化時(shí)間的方法，對(duì)javascript時(shí)間格式化的方法進(jìn)行了總結(jié)，感興趣的小伙伴們可以參考一下
2015-12-12
單行 JS 實(shí)現(xiàn)移動(dòng)端金錢格式的輸入規(guī)則
這篇文章主要介紹了單行 JS 實(shí)現(xiàn)移動(dòng)端金錢格式的輸入規(guī)則,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-05-05
JS搜狐面試題分析
這篇文章主要介紹了JS搜狐面試題,涉及javascript數(shù)組、字符串及面向?qū)ο蟪绦蛟O(shè)計(jì)相關(guān)技巧,需要的朋友可以參考下
2016-12-12
javascript獲取當(dāng)前的時(shí)間戳的方法匯總
這篇文章主要介紹了javascript獲取當(dāng)前的時(shí)間戳的方法匯總的相關(guān)資料,需要的朋友可以參考下
2015-07-07
js如何獲取object類型里的鍵值
這篇文章主要介紹了js獲取object類型里鍵值的方法,需要的朋友可以參考下
2014-02-02
javascript的tab切換原理與效果實(shí)現(xiàn)方法
這篇文章主要介紹了javascript的tab切換原理與效果實(shí)現(xiàn)方法,實(shí)例分析了簡(jiǎn)單的tab切換實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-01-01
如何寫一個(gè)通用的JavaScript效果庫！(1/2)
如何寫一個(gè)通用的JavaScript效果庫！(1/2)...
2007-04-04
一個(gè)JavaScript處理textarea中的字符成每一行實(shí)例
這篇文章主要與大家分享一個(gè)JavaScript處理textarea中的字符成每一行實(shí)例，很簡(jiǎn)單，但很實(shí)用，大家可以看看
2014-09-09