首先根据HTML选择显示列表，然后单击HTML按钮后根据选择将其定向到特定页面

Question

首先，我尝试根据从下拉菜单中选择的选项列出元素，然后在单击“转到相关页面”按钮后打开与特定类别相关的特定页面。 例如，如果用户选择“水果”，那么它首先应列出水果项目，然后在单击“转到相关页面”按钮后应打开fruits.html页面。 另一个示例是，如果用户选择“蔬菜”，那么它首先应列出蔬菜项目，然后在单击“转到相关页面”按钮后应打开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>

Answer 1

您非常接近，您所要做的就是实现点击位。 因此，让我们为按钮添加一个包含锚标签（或链接）的标签。 然后，我们可以轻松修改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>

Answer 2

这样，您可以根据所选选项重定向到所需页面

在同一目录中创建两个页面fruits.html和蔬菜.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";
}

HTML代码

<!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>

首先根据HTML选择显示列表，然后单击HTML按钮后根据选择将其定向到特定页面

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-03-30 04:18:41

解决方案2
0 2017-03-30 04:35:38

首先根据HTML选择显示列表，然后单击HTML按钮后根据选择将其定向到特定页面

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-03-30 04:18:41

解决方案2 0 2017-03-30 04:35:38

解决方案1
0 已采纳 2017-03-30 04:18:41

解决方案2
0 2017-03-30 04:35:38