Having select options in 2 drop down menu lists?

Question

I want to have 2 menu lists and you must select an option from each list then click the next button taking you to another page.

Here's a link: http://home.comcast.net/~techjunkee/

Answer 1

Note that I changed the IDs of your SELECT elements. I did this to make it easier to locate a specific element in JavaScript. For that to work, each element should have its own distinct 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();" />

...and for 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

The script you have provided works but I guess I can't figure out how to target different pages instead of "someplace.html"

The values have me confused how to translate this URL (http://home.comcast.net/~techjunkee/index.html?jumpMenu1=1&jumpMenu2=5)

Sorry for being a bird brain. I'm trying to learn this.

Answer 3

You have two options:

1) You redirect to the same page every time, but when the page will load you should check the values from the query string and display the content you want based on that values. This is how you get values from query string:

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!

}

}