html:通过getElementById(id)方法访问节点实现下拉列表的选择

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>下拉菜单title>
		<script language="javascript">
			function $(id) {
				return document.getElementById(id);
			} 
			function changeImage(){                                  
				var index = $("tp").selectedIndex;            
				$("show").src = $("tp").options[index].value;
			}
		script>
	head>
	<body>
		<div>
			<form>
				<select id="tp" onChange="changeImage()">
					<option value="图片/pic0.jpg">
						--请选择--
					option>
					<option value="图片/pic0.jpg">
						平板电视
					option>
					<option value="图片/pic1.jpg">
						笔记本电脑
					option>
					<option value="图片/pic2.jpg">
						单反相机
					option>
					<option value="图片/pic3.jpg">
						智能手机
					option>
				select>
			form>
		div>
		<p><img src="pic0.jpg" id="show">p >
	body>
html>

效果图

html:通过getElementById(id)方法访问节点实现下拉列表的选择_第1张图片
html:通过getElementById(id)方法访问节点实现下拉列表的选择_第2张图片
html:通过getElementById(id)方法访问节点实现下拉列表的选择_第3张图片
html:通过getElementById(id)方法访问节点实现下拉列表的选择_第4张图片

你可能感兴趣的:(javascript,开发语言,ecmascript)