用js和select实现选择头像和显示头像

最新推荐文章于 2021-04-22 09:35:28 发布
原创 最新推荐文章于 2021-04-22 09:35:28 发布 · 2.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用JavaScript根据下拉菜单选择动态更改图片源的方法。通过监听下拉菜单的onchange事件，调用setImg函数更新图片的src属性，实现图片的即时预览效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

function setImg(){
    var imageSrc = document.registerForm.photo.value;
    document.registerForm.img.src = imageSrc;
}

 

<select name="photo"  onchange="return setImg()" >
<option value="images/img1.png" >吴磊</option>
<option value="images/img2.png" >倪妮</option>
</select>

<img name="img" src="images/img1.png" width="60px" height="65px">

 

JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片
小枯林的博客
12-29 2618
需求：改变列表框的值时候，图片发生改变：、 程序代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--add()方法输出中文出现了乱码，这儿指定下编码方式--> <title>js</title> <script type="text/javascript" src="index.js"></script&gt
js实现Select头像选择实时预览代码
10-23
主要介绍了js实现Select头像选择实时预览代码,涉及javascript动态遍历及设置select选项的技巧,非常简单实用,需要的朋友可以参考下
实现选择系统头像功能
12-06
用于实现系统头像选择的功能，实现用户选择系统头像。
JQuery实现ImageSelect图片下拉框控件
12-22
实用性很强.JQuery实现的图片下拉框。
js实现编辑用户头像
03-15
web在线编辑用户头像 java版 前端用javascript来处理图片 后台采用java语言
jQuery选择头像并实时显示的代码
10-29
这个简单的jQuery实现头像选择并实时显示的功能，可以很容易地应用到各种网页项目中。只需要根据实际的图片路径和头像数量进行相应的调整。同时，这个示例也展示了如何使用jQuery来监听DOM元素的事件，并根据事件...
select头像选择代码.rar
07-05
在IT行业中，尤其是在前端开发领域，用户界面的交互体验至关重要，而"select头像选择代码"就是一个关于如何创建一个友好的头像选择功能的实例。这个压缩包文件可能包含了一个JavaScript实现的代码库，用于创建一个...
select头像选择代码
09-23
压缩包中的"select头像选择代码.htm"文件很可能是实现这一功能的HTML文件，其中包含HTML结构、CSS样式和嵌入的JavaScript代码。通过查看和分析这个文件，我们可以更具体地了解代码如何实现上述功能。 总的来说，...
jQuery下拉框图片选择特效imageselect.js示例
08-09
jQuery基于imageselect.js插件的示例，下拉框图片选择特效，在Select下拉框中使用图片，并选择图片的功能，加入了一些特效，不仅仅是图片选择。
Js弹出框代码，头像选择工具
weixin_34302561的博客
06-20 474
javascript代码 /** * 弹出头像JS */ var ICO = new Object(); ICO.show = function(){ $(".pop-ico").fadeIn(); } ICO.hide = function(){ ...
分享Js弹出框代码，头像选择工具.
qq362217990的专栏
07-30 277
这段时间自己在学习前端JS和CSS开发，因为留言和评论模块上要用到头像选择，自己写一个简单的，分享下代码。 其实稍加改动也可以用来做表情控件. 效果图： [img]http://dl.iteye.com/upload/attachment/0071/5578/5b473e31-3879-3863-8a84-b4ac81e1a200.jpg[/img] js...
请选择您喜欢的人物头像JS代码
黑鹰
03-30 2059
function select_face() { var somevalue; somevalue=window.showModalDialog("browse.php","请选择您喜欢的人物头像", "dialogWidth='310px';dialogHeight='240px';status='no';help='no';scrollbars='no'"); document.for
使用JavaScript实现选择头像和表情的功能
xuhuanchao的专栏
11-23 1318
 无标题文档<!--#div { position:absolute; left:81px; top:11px; width:300px; height:400px; z-index:0; border : solid 0px purple ; display:none;}-->#div { position:absolute;
js实现点击头像选择图片后立刻显示更换后的图片
xiaotuwai8的博客
03-11 861
js实现点击头像选择图片后立刻显示更换后的图片： imgselect是控件的id imgshow是的id 代码如下 function user_imgchanged(imgselect, imgshow) { var img = document.getElementById(imgshow); var url = null; var fileObj = document....
【JavaScript】------- JavaScript 实现选择图片文件并展示在界面中预览 示例代码
皮皮冰要做大神
07-28 2191
1. 怎么获取文件能够在界面先显示出来图片信息及图片呢！ 看如下实例呀： <input type="file" value="" name="image[]" id="image" multiple="multiple">//多个文件上传 function $(id) { return document.querySelector(id); ...
JavaScript：通过纯js代码实现图片实时预览功能
東辰的博客
04-22 470
誊抄自原来的笔记 一、首先定义一个file选择框，写好change事件 <input type="file" accept="image/*" onchange="changeHandle(this)"> 二、change事件代码，通过FileReader实现预览 弹框是用的layer function changeHandle(_this) { // 获取当前选中的文件 var file = _this.files[0]; const imgMaxSize = 1.
JavaScript实现用户注册头像选择功能
首先，我们来解释标题中的“select头像选择代码”。这指的是一种使用HTML、CSS和JavaScript编程语言编写的前端代码，用于实现用户在网页上通过点击按钮或其他UI元素来选择本地电脑上的图片文件。 【HTML】 为了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YANG_LJ_is_ME

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值