js学习笔记（二）下拉菜单项选择并跳转

最新推荐文章于 2021-09-26 14:39:51 发布

默默前行的蜗牛

最新推荐文章于 2021-09-26 14:39:51 发布

阅读量958

点赞数

分类专栏： js学习笔记文章标签： javascript option

本文链接：https://blog.csdn.net/ywf008/article/details/52718823

版权

js学习笔记专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" href="script02.css">
</HEAD>

<BODY>
<form action="" class="centered">
	<select id="newLocation">
		<option selected>Select a topic</option>
		<option value="start01.html">Cross-checking fields</option>
		<option value="start02.html">Working with radio buttons</option>
		<option value="start03.html">Setting one field with author</option>
		<option value="start04.html">Validating Zip codes</option>
		<option value="start05.html">Validating email address</option>
		
		
	</select>
	<noscript>
		<input type="submit" value="Go There">
	</noscript>
</form>


<script>
	window.οnlοad=initForm;
	window.οnunlοad=function(){};

	function initForm(){
		document.getElementById("newLocation").selectedIndex=0;
		document.getElementById("newLocation").οnchange=jumpchange;//修改了对象

	}
	function jumpchange(){
		var newLoc=document.getElementById("newLocation");
		var newPage=newLoc.options[newLoc.selectedIndex].value;
		if(newPage!=""){
			window.location=newPage;
		}
	}
</script>
</BODY>
</HTML>

这个脚本最好的一点是：在添加了javascipt函数之后，当添加、修改、或者改变下拉菜单选项时，不需要修改函数，只需要设置菜单项的值。