Javascript 首先根据HTML选择显示列表，然后在单击HTML按钮后根据选择指向特定页面_Javascript_Jquery_Html_Css

Javascript 首先根据HTML选择显示列表，然后在单击HTML按钮后根据选择指向特定页面

javascript jquery html css

Javascript 首先根据HTML选择显示列表，然后在单击HTML按钮后根据选择指向特定页面,javascript,jquery,html,css,Javascript,Jquery,Html,Css,首先，我试图根据从下拉菜单中选择的选项列出元素，然后在单击“转到相关页面”按钮后打开与特定类别相关的特定页面。例如，如果用户选择了水果，那么首先它应该列出水果项目，然后在单击“转到相关页面”按钮后，应该打开Fruits.html页面。另一个例子是，如果用户选择蔬菜，那么首先它应该列出蔬菜项目，然后在单击“转到相关页面”按钮后，应该打开vegets.html页面我已经成功地完成了第一部分，但仍停留在第二部分。我已将代码粘贴到下面。我试图通过一个名为goToPage（）的函数来完成第二部分，但不知

首先，我试图根据从下拉菜单中选择的选项列出元素，然后在单击“转到相关页面”按钮后打开与特定类别相关的特定页面。例如，如果用户选择了水果，那么首先它应该列出水果项目，然后在单击“转到相关页面”按钮后，应该打开Fruits.html页面。另一个例子是，如果用户选择蔬菜，那么首先它应该列出蔬菜项目，然后在单击“转到相关页面”按钮后，应该打开vegets.html页面

我已经成功地完成了第一部分，但仍停留在第二部分。我已将代码粘贴到下面。我试图通过一个名为goToPage（）的函数来完成第二部分，但不知道该怎么做。它不一定是这个功能，任何其他可行的方法都是最受欢迎的

//JavaScript
"严格使用",；
var类别=[“水果”、“蔬菜”]；
var水果=[“苹果”、“香蕉”、“橙子”]；
var fruitsLen=果实长度；
var蔬菜=[“花椰菜”、“布林哈尔”、“土豆”]；
var vegLen=蔬菜长度；
var i；
var listToDisplay=“”；
//根据所选类别显示内容的功能
功能显示内容（v）{
开关（v）{
“水果”一案：
对于（i=0；i您非常接近，您所要做的就是实现点击位。因此，让我们为按钮添加一个包含锚定标记（或链接）。然后我们可以轻松修改href
属性。a在我的网站上放置两个愚蠢的页面，以便您可以看到它的工作原理

//JavaScript
"严格使用",；
var类别=[“水果”、“蔬菜”]；
var水果=[“苹果”、“香蕉”、“橙子”]；
var fruitsLen=果实长度；
var蔬菜=[“花椰菜”、“布林哈尔”、“土豆”]；
var vegLen=蔬菜长度；
var FROUTSURL=”http://neil.computer/stack/fruits.html";
变量vegetablesUrl=”http://neil.computer/stack/vegetables.html";
var i；
var listToDisplay=“”；
//根据所选类别显示内容的功能
功能显示内容（v）{
开关（v）{
“水果”一案：
对于（i=0；i），您可以根据所选选项重定向到所需页面
在同一目录中创建两个页面fruits.html和vegets.html
// 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 optionSelected = "";       //Changed Here

var i;
var listToDisplay = ""; 

//function to display contents accroding to the category selected
function displayContents(v){
  listToDisplay = "";               // Changed Here
  optionSelected = v;               // Changed Here
  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(){
    if(optionSelected === "fruits")              //Changed Here
        window.location = "fruits.html";
    else if(optionSelected === "vegetables")
        window.location = "vegetables.html";
}

//JavaScript
"严格使用",；
var类别=[“水果”、“蔬菜”]；
var水果=[“苹果”、“香蕉”、“橙子”]；
var fruitsLen=果实长度；
var蔬菜=[“花椰菜”、“布林哈尔”、“土豆”]；
var vegLen=蔬菜长度；
var optionSelected=“；//此处已更改
var i；
var listToDisplay=“”；
//根据所选类别显示内容的功能
功能显示内容（v）{
listToDisplay=“；//此处已更改
optionSelected=v；//此处已更改
开关（v）{
“水果”一案：
for（i=0；imarked！看起来我们不能只将一个答案标记为解决方案。
<!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>