【发布时间】：2009-09-19 19:59:49
【问题描述】：
我想要 2 个菜单列表，您必须从每个列表中选择一个选项，然后单击下一个按钮将您带到另一个页面。
【问题讨论】：
-
您如何使用选择元素值来确定要加载的页面？
标签： javascript drop-down-menu options menuitem
【发布时间】：2009-09-19 19:59:49
【问题描述】：
请注意，我更改了您的 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;
}
}
【讨论】：
-
.value在<select>元素上不可预测 - 使用elem.options[elem.selectedIndex].value
您提供的脚本有效，但我想我无法弄清楚如何定位不同的页面而不是“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!
}
}
【讨论】：