在 2 个下拉菜单列表中选择选项？

Question

我想要 2 个菜单列表，您必须从每个列表中选择一个选项，然后单击下一步按钮将您带到另一个页面。

这是一个链接：http://home.comcast.net/~techjunkee/

Answer 1

请注意，我更改了 SELECT 元素的 ID。我这样做是为了更容易地在 JavaScript 中定位特定元素。为此，每个元素都应该有自己独特的 id。

<select id="jumpMenu1">
 <option value="0">Choose</option>
 <option value="">13</option> 
 <option value="">14</option> 
 <option value="">15</option> 
 <option value="">16</option> 
 <option value="">16.5</option> 
 <option value="">17</option> 
 <option value="">17.5</option> 
 <option value="">18</option> 
 <option value="">19.5</option> 
 <option value="">20</option> 
 <option value="">21</option> 
 <option value="">22</option> 
 <option value="225.html">22.5</option> 
 <option value="">24</option> 
 <option value="245.html">24.5</option> 
</select>

<select id="jumpMenu2">
 <option value="0">Choose</option>
 <option value="">11</option> 
 <option value="">12</option> 
 <option value="">13</option> 
 <option value="">16</option> 
 <option value="">16.5</option> 
 <option value="">17</option> 
 <option value="">17.5</option> 
 <option value="">18</option> 
 <option value="">19.5</option> 
 <option value="">20</option> 
 <option value="">21</option> 
 <option value="">22</option> 
 <option value="225.html">22.5</option> 
 <option value="">24</option> 
 <option value="245.html">24.5</option> 
</select>

<input type="button" value="Next" onclick="goToPage();" />

...对于 JavaScript：

function goToPage()
{
  var jumpMenu1Value = document.getElementById("jumpMenu1").value;
  var jumpMenu2Value = document.getElementById("jumpMenu2").value;

  if(jumpMenu1Value !== 0 && jumpMenu2Value !== 0)
  {
    window.location = "someplace.html?jumpMenu1=" + 
                      jumpMenu1Value + "&jumpMenu2=" + 
                      jumpMenu2Value;
  }
}

Answer 2

您提供的脚本有效，但我想我无法弄清楚如何定位不同的页面而不是“someplace.html”。

这些值让我困惑如何翻译此 URL (http://home.comcast.net/~techjunkee/index.html?jumpMenu1=1&jumpMenu2=5< /a>)

抱歉，我是个鸟脑。我正在努力学习这个。

Answer 3

您有两个选择：

1. 每次都重定向到同一页面，但是当页面加载时，您应该检查查询字符串中的值并根据该值显示您想要的内容。这是从查询字符串获取值的方法：

 protected void Page_Load(object sender, EventArgs e)
 {

     double jumpMenu1; 

     double jumpMenu2;

     try{jumpMenu1 = double.Parse(Request.QueryString["jumpMenu1"]);}catch {jumpMenu1 = 0;}

     try{jumpMenu2 = double.Parse(Request.QueryString["jumpMenu2"]);}catch {jumpMenu2 = 0;}

} 

 2) You redirect to different pages from javascript, also based on the values from those two select values.  

function goToPage()

{

   var jumpMenu1Value = document.getElementById("jumpMenu1").value;

   var jumpMenu2Value = document.getElementById("jumpMenu2").value;

   if(jumpMenu1Value !== 0 && jumpMenu2Value !== 0)

   {

     switch (jumpMenu1Value)

     {

         case 13:

         {

            switch (jumpMenu1Value)

            {

               case 11:

               {

                  // the page coresponding to the Rim Size "13" and Tire Size "11"

                  window.location = "someplace13-11.html"; 

                  break;

               }

               case 12:

               {

                  // the page coresponding to the Rim Size "13" and Tire Size "12"

                  window.location = "someplace13-12.html"; 

                  break;

               }

               //...

               default:

               {

                  // redirect to a default/error page or show an error message

               }

            }

         }

         case 14:

         {

            switch (jumpMenu1Value)

            {

               case 11:

               {

                  // the page coresponding to the Rim Size "14" and Tire Size "11"

                  window.location = "someplace14-11.html"; 

                  break;

               }

               case 12:

               {

                  // the page coresponding to the Rim Size "14" and Tire Size "12"

                  window.location = "someplace14-12.html"; 

                  break;

               }

               //...

               default:

               {

                  // redirect to a default/error page or show an error message

               }

            }

         }

         
         //...   

         default:

         {

            // redirect to a default/error page or show an error message

         }

      }

    }

    else

    {

       //show an error message, the user has to choose both options!

    }

}