JavaScript如何使用列表框实现url跳转的代码_JavaScript

JavaScript通过列表框实现url跳转的代码，在下拉框内输入相应的跳转项目和网址，选择其中一项，自动跳转到相应的网址
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Combo Link w/ Description</title>
<style type="text/css">
<!--
label {
   display : block;
   color : #09f;
   border-bottom : 1px dashed #ccc;
   margin-bottom : .500em;
   padding-bottom : .300em;
   font-weight : bold;
   text-transform : uppercase; }
select {
   color : #506070;
   margin : 0 auto;
   text-align : center;
   border : 1px solid #ccc;
   letter-spacing : 2px;
   height : 28px;
   width : 300px;
   max-width : 300px; }
form div { position : relative; }
form {
   background-color : transparent;
   position : absolute;
   left : 3%;
   top : 3%; }
div#main {
   margin : 0 auto;
   min-height : 600px;
   padding : 0;
   width : auto; }
div#title {
   background-color : #fff;
   border : 1px solid #ccc;
   margin-top : 1em;
   padding : 1em;
   line-height : 1.4;
   min-height : 70px;
   letter-spacing : 1px;
   color : #506070; }
div#label {
   background-color : #f0fff0;
   margin : 0;
   max-width : 300px;
   min-height : 120px;
   padding : 1em;
   border : 1px solid #ccc;
 }
input#btn {
   border : 1px solid #ccc;
   color : #506070;
   margin-top : 1em;
   background-color : #fff;
   height : 28px;
   width : 50px;
     }
-->
</style>
<script type="text/javascript">
<!-- 
/* 
  COMBO Link Jumper - 
  Author : essential -
~ Profile : http://www.daniweb.com/forums/member383844.html -
~ Get instant solutions in your programming needs, visit : http://www.daniweb.com/
  ~ This notice must reamain intact for use.
*/
var formID = "formId"; // Specify your form id/name.
var divDesc = "title"; // Specify your div id, in where you want to show the text description.
var changeLoc = function( where ) {
   location.href = where;
   };
 
var navigate = function() {
var desc = [
/* Description / blurbs #1 */
"DANIWEB IT Discussion Community",
/* Description / blurbs #2 */
"Leading the Web to its full potential...",
/* Description / blurbs #3 */
"Full Web building tutorials - ALL Free!" ];
var div;
var form;
      try {
      div = document.getElementsByTagName("div")
      } catch( er ) {
      document.all.tags("div")
      } try {
      form = document.forms[ formID ];
      } catch( e ) {
      form = (( document.getElementById ) ? document.getElementById( formID ) : (( document.all ) ? document.all[ formID ] : document.layers[ formID ] ));
      }
   var index = form.sel.selectedIndex;
      div[ divDesc ].innerHTML = desc[ index ];
};
// -->
</script>
</head>
<body>
<div id="main">
<form id="formId" name="formId" action="." onsubmit="return false;">
<div id="label">
<label for="sel">Jump Box!</label> <select id="sel" name="sel" onchange="navigate();">
<option value="http://www.daniweb.com/">DANIWEB IT Community</option>
<option value="http://www.w3.org/">World Wide Web Consortium</option>
<option value="http://www.w3schools.com">W3Schools Online Tutorials</option>
</select>
<div>
<div id="title">DANIWEB IT Discussion Community</div><div><input type="button" id="btn" name="btn" onclick="changeLoc( formId.sel.options[ formId.sel.selectedIndex ].value );" value="GO!"></div></div>
</div>
</form>
</div>
</body>
</html>