Question

我目前正在使用一系列下拉菜单在 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个下拉菜单的提交按钮将我带到最后一段代码设计为的网站带我去。如何分离代码，以便第一个系列的三个下拉列表不受任何其他系列的影响？

Answer 1

你的第二个函数gotoSelection（）缺少一个右括号，但这不是导致你的问题的原因。

将URL传回锚点的方式不正确尝试;

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

在setupLink（）函数中替换行;

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

制作一个包含多个下拉菜单的表格

1 个答案: