我想要 2 个菜单列表,您必须从每个列表中选择一个选项,然后单击下一个按钮将您带到另一个页面。
3 回答
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;
}
}
您提供的脚本有效,但我想我无法弄清楚如何定位不同的页面而不是“someplace.html”
这些值让我很困惑如何翻译这个 URL ( http://home.comcast.net/~techjunkee/index.html?jumpMenu1=1&jumpMenu2=5 )
对不起,我是一个鸟脑子。我正在努力学习这个。
你有两个选择:
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)您从 javascript 重定向到不同的页面,也基于这两个选择值的值。
函数 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!
}
}