首先，我尝试根据从下拉菜单中选择的选项列出元素，然后在单击转到相关页面按钮后打开与特定类别相关的特定页面。例如，如果用户选择 Fruits，那么首先应该列出水果项，然后在单击 Go To Related Page 按钮后应该打开 fruits.html 页面。另一个例子是，如果用户选择 Vegetables，那么首先它应该列出蔬菜元素，然后在点击 Go To Related Page 按钮后应该打开 vegetables.html 页面。
我已经成功完成了第一部分，但卡在了第二部分。我在下面粘贴了我的代码。我试图在名为 goToPage() 的函数的帮助下完成第二部分，但不知道该怎么做。它不一定是这个功能，任何其他可行的方式都是最受欢迎的。
// JavaScript
'use strict';
var category = ["Fruits", "Vegetables"];
var fruits = ["Apple", "Banana", "Orange"];
var fruitsLen = fruits.length;
var vegetables = ["Cauliflower", "Brinjal", "Potato"];
var vegLen = vegetables.length;
var i;
var listToDisplay = "";
//function to display contents accroding to the category selected
function displayContents(v){
switch(v){
case "fruits":
for(i=0; i<fruitsLen; i++){
listToDisplay += "<br>" + fruits[i];
}
document.getElementById('displayDiv').innerHTML = listToDisplay;
break;
case "vegetables":
for(i=0; i<vegLen; i++){
listToDisplay += "<br>" + vegetables[i];
}
document.getElementById('displayDiv').innerHTML = listToDisplay;
break;
default:
document.getElementById('displayDiv').innerHTML = "Invalid Selection.";
}
}
//function to go to particular page
function goToPage(){
}<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<div id="categoryDiv">
Select Category:
<select id="categorySelect" onChange="displayContents(this.value)">
<option value="first">Please select a category</option>
<option value="fruits">Fruits</option>
<option value="vegetables">Vegetables</option>
</select>
<br>
</div>
<div id="displayDiv">
</div>
<div id="buttonDiv">
<br>
<input type="button" value="Go to Related Page" onclick="goToPage()">
</div>
</body>
</html>最佳答案
你已经很接近了，你所要做的就是实现点击位。因此，让我们为按钮添加一个包含 anchor 标记(或链接)。然后我们就可以轻松修改href属性了。在我的网站上放了几个哑页，这样你就可以看到它是如何工作的。
// JavaScript
'use strict';
var category = ["Fruits", "Vegetables"];
var fruits = ["Apple", "Banana", "Orange"];
var fruitsLen = fruits.length;
var vegetables = ["Cauliflower", "Brinjal", "Potato"];
var vegLen = vegetables.length;
var fruitsUrl = "http://neil.computer/stack/fruits.html";
var vegetablesUrl = "http://neil.computer/stack/vegetables.html";
var i;
var listToDisplay = "";
//function to display contents accroding to the category selected
function displayContents(v){
switch(v){
case "fruits":
for(i=0; i<fruitsLen; i++){
listToDisplay += "<br>" + fruits[i];
}
document.getElementById('displayDiv').innerHTML = listToDisplay;
$("#buttonDiv a").attr("href",fruitsUrl);
break;
case "vegetables":
for(i=0; i<vegLen; i++){
listToDisplay += "<br>" + vegetables[i];
}
document.getElementById('displayDiv').innerHTML = listToDisplay;
$("#buttonDiv a").attr("href",vegetablesUrl);
break;
default:
$("#buttonDiv a").attr("href","#");
document.getElementById('displayDiv').innerHTML = "Invalid Selection.";
}
}
//function to go to particular page
function goToPage(){
}#buttonDiv a {
text-decoration:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<div id="categoryDiv">
Select Category:
<select id="categorySelect" onChange="displayContents(this.value)">
<option value="first">Please select a category</option>
<option value="fruits">Fruits</option>
<option value="vegetables">Vegetables</option>
</select>
<br>
</div>
<div id="displayDiv">
</div>
<div id="buttonDiv">
<br>
<a href="#"><input type="button" value="Go to Related Page" onclick="goToPage()"></a>
</div>
</body>
</html>关于javascript - 先根据HTML选择显示列表，点击HTML按钮后根据选择定向到特定页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43108365/