2012-07-27 18 views
-1

我目前正在製作一個網頁,其中包含一系列下拉菜單,其中包含html。該網站是在這裏:http://tc.met.psu.edu/tcgengifs/index2.html製作由多個下拉菜單組成的表格

我使用下面的代碼,以使下拉菜單

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript"> 
     function getUrl() { 
       var part12 = document.getElementById("firstChoice2").value; 
       var part22 = document.getElementById("secondChoice2").value; 
       var part32 = document.getElementById("thirdChoice2").value; 
       return "http://tc.met.psu.edu/tcgengifs/CMC/"+part12+"/"+part22+part32; 
} 
     function gotoSelection() { 
     var urlToGoTo = getUrl(); 
     alert(urlToGoTo); 
     //location.href=urlToGoTo; 

     function setupLink() { 
     var urlToGoTo = getUrl(); 
     document.getElementById("gotoLink").href=UrlToGoTo; 
      } 
</script> 
</head> 
<body onload="setupLink();"> 
<div id=leftcol> 
<select id =firstChoice2 onchange="setupLink();"> 
    <option value=2012072600>2012072600</option> 
    <option value=2012072512>2012072512</option> 
</select> 
</div> 
<body> 
<div id=leftcencol> 
<select id =secondChoice2 onchange="setupLink();"> 
<option value=rain>Rainfall</option> 
<option value=slp>Sea Level Pressure</option> 
<option value=850virt>850mb Virtual Temperature</option> 
</select> 
</div> 
<div id=rightcencol> 
<select id =thirdChoice2 onchange="setupLink();"> 
    <option value=.anim.html>Animation</option> 
    <option value=0.png>000hr</option> 
    <option value=1.png>006hr</option> 
    <option value=2.png>012hr</option> 
</select> 
</div> 
<div id=rightcol> 
<a id="gotoLink" href="">Submit</a> 

我的問題是我需要使用此代碼(經修改)多次,但是當我這樣做,每個3下拉菜單系列的提交按鈕帶我到最後一段代碼旨在帶給我的網站。我如何區分代碼,以便第一系列的三個下拉列表不受任何其他系列的影響?

回答

0

您的第二個函數gotoSelection()缺少一個右大括號,但這不是導致您的問題的原因。

您將URL傳遞迴錨點的方式不正確嘗試;

document.getElementById("gotoLink").setAttribute("href",urlToGoTo); 

在你setupLink()函數來代替線;

document.getElementById("gotoLink").href=UrlToGoTo;