本文介绍使用JavaScript实现Select下拉框选择头像并实时预览的功能。通过监听select元素的onchange事件，动态获取选中选项的图片路径，并赋值给img标签的src属性，从而在用户选择头像时即时显示对应图片，提升留言或评论时的交互体验。
Select下拉头像实时预览功能介绍
本文分享一个使用JavaScript实现的下拉框头像选择及实时预览功能的示例。
该功能演示了如何通过Select下拉选框实现头像的快速选择与即时预览。在留言或评论场景中，以往常见的方式是使用单选按钮，但采用下拉选框的形式也能提供良好的用户体验，让用户更便捷地选择头像。
具体运行效果如下图所示：
您可以访问以下在线演示地址查看实际效果：
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>
希望这段代码能对您的JavaScript程序设计提供有益的参考。