首页 / JAVASCRIPT / JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片

JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1154字，纯文字阅读大概需要2分钟。

内容图文

需求：改变列表框的值时候，图片发生改变：、

JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片 - 文章图片

JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片 - 文章图片

JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片 - 文章图片

JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片 - 文章图片

程序代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  <!--add()方法输出中文出现了乱码，这儿指定下编码方式-->
	<title>js</title>
	<script type="text/javascript" src="index.js"></script>
</head>
<body onl oad="initLogo()">
	<form>
		<img src="image/headLogo/1.png" id="img1">
		<select id="logo" onchange="selectLogo()"></select>
	</form>
</body>
</html>
// 初始化，图片旁边的下拉选择框
function initLogo(){
	var logo = document.getElementById("logo");
	for(var i=1;i<=5;i++){
		logo.options.add(new Option(i,i));
	}
}

function selectLogo(){
	var logo = document.getElementById("logo");
	var n = parseInt(logo.value);
	var logoImg = document.getElementById("img1");
	logoImg.src = "image/headLogo/"+n+".png";
}

效果：

JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片 - 文章图片

注：经过总结发现：

         （1）JS要想操作某个控件，必须先通过document.getElement***By***(“”)；获得控件对应的对象，才能后续操作；

         （2）parseInt()这种类型转换函数经常用，尤其是在获取控件属性值时的时候类型转换一下，以确保后续使用这个值的时候不会出现类型问题；

         （3）img是一个控件，这个控件有很多属性，可以在html中对其属性进行设置，也可以在JS中对其属性进行设置；JS的其他控件情况类同，慢慢加深熟练度啦；

JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片 - 文章图片

JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片 - 文章图片

内容总结

以上是互联网集市为您收集整理的JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片全部内容，希望文章能够帮你解决JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/614066.html

来源：【匿名】