HTML-如何显示和将选定的值从下拉菜单定向到新的HTML页面
[英]HTML - How To Display & Direct Selected Values From Drop Down Menu To A New HTML Page
问题描述
How can I display/redirect the selected values the drop down lists from a HTML page to a new page? 
如何将下拉列表中的所选值从HTML页面显示/重定向到新页面？ For instance, if I select any value from the drop down list and when I click on the 'GO' button, the page will be directed to a new page with the selected value being displayed. 例如，如果我从下拉列表中选择任何值，并且当我单击“ GO”按钮时，该页面将被定向到一个新页面，并显示所选值。 Need help on this one. 在这方面需要帮助。
<!DOCTYPE html> <html> <body> <div align="center"> <center> <h4 style="color:darkblue">Choose Your Food/Beverage & Status : </h3> </center> <table> <tr> <td> <font size=2> <B>Choose a Food/Beverage : </B> </font> <select ID="foodbeverage"> <optgroup label="DEFAULT"> <option value = "NONE">NONE</option> </optgroup> <optgroup label="Food"> <option value = "chickenchop">Chicken Chop</option> <option value = "pasta">Pasta</option> <option value = "pizza">Pizza</option> <option value = "chocolate">Chocolate Cake</option> <option value = "redvelvet">Red Velvet Cake</option> <option value = "icecream">Ice Cream Cake</option> </optgroup> <optgroup label="Beverages"> <option value = "milk">Milk</option> <option value = "freshjuice">Fresh Juice</option> <option value = "icecream">Ice Cream</option> <option value = "coffee">Coffee</option> <option value = "carbonated">Carbonated Can Drink</option> <option value = "water">Water</option> </optgroup> </select> <br/> <font size=2> <B>Choose a Food/Beverage : </B> </font> <select ID="foodbeverage"> <optgroup label="DEFAULT"> <option value = "NONE">NONE</option> </optgroup> <optgroup label="Food"> <option value = "chickenchop">Chicken Chop</option> <option value = "pasta">Pasta</option> <option value = "pizza">Pizza</option> <option value = "chocolate">Chocolate Cake</option> <option value = "redvelvet">Red Velvet Cake</option> <option value = "icecream">Ice Cream Cake</option> </optgroup> <optgroup label="Beverages"> <option value = "milk">Milk</option> <option value = "freshjuice">Fresh Juice</option> <option value = "icecream">Ice Cream</option> <option value = "coffee">Coffee</option> <option value = "carbonated">Carbonated Can Drink</option> <option value = "water">Water</option> </optgroup> </select> <br/> </td> <td> <font size=2> <B>Dine In or Take Away : </B> </font> <select ID="status"> <optgroup label="DEFAULT"> <option value = "NONE">NONE</option> </optgroup> <optgroup label="STATUS"> <option value = "dinein">Dine In</option> <option value = "takeaway">Take Away</option> </optgroup> </select> <br/> <font size=2> <B>Dine In or Take Away : </B> </font> <select ID="status"> <optgroup label="DEFAULT"> <option value = "NONE">NONE</option> </optgroup> <optgroup label="STATUS"> <option value = "dinein">Dine In</option> <option value = "takeaway">Take Away</option> </optgroup> </select> <br/> </td> </tr> </table> <br/> <form method="get" action="newPage.html"> <input type="submit" value=" GO " /> </form> <br/> </body> </html>
In this page, I want the values to be displayed/redirected accordingly. 在此页面中，我希望相应地显示/重定向值。
<!DOCTYPE html> <html> <body> <div align="center"> <font size=4> <B>Food/Beverage Selected : </B> </font> <br/> <br/> <font size=4> <B>Dine In/Take Away : </B> </font> <br/> <br/> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2017-08-25 09:49:31
The Explanation 说明
The simplest way according to me is to use a form and PHP code to fill the other page. 对我来说，最简单的方法是使用表单和PHP代码填充另一页。 In order to pass data from one page to another you used a form. 为了将数据从一页传递到另一页，您使用了一种表单。 But you need to put your selects into the form. 但是您需要将选择内容放入表单中。
And then, in order to display the data in the second page you need some PHP code. 然后，为了在第二页中显示数据，您需要一些PHP代码。 So You need to rename your newPage.html to newPage.php . 因此，您需要将newPage.html重命名为newPage.php 。
Run PHP 运行PHP
Then of course to run the PHP you will need a server. 然后，当然要运行PHP，您将需要服务器。 If you don't have any, I recommend you install either one of them : 如果没有，我建议您安装其中之一：
- WAMp for Window 窗口的WAMp
- MAMP for Mac Mac版MAMP
- XAMP for Linux (also available on Window and Mac. XAMP for Linux（在Window和Mac上也可用。
The code 编码
<!DOCTYPE html> <html> <body> <div align="center"> <center> <h4 style="color:darkblue">Choose Your Food/Beverage & Status : </h3> </center> <form method="get" action="newPage.php"> <div> <label for='foodbeverage'>Choose a Food/Beverage : </label> <select ID="foodbeverage" name='foodbeverage[]'> <optgroup label="DEFAULT"> <option value="NONE">NONE</option> </optgroup> <optgroup label="Food"> <option value="chickenchop">Chicken Chop</option> <option value="pasta">Pasta</option> <option value="pizza">Pizza</option> <option value="chocolate">Chocolate Cake</option> <option value="redvelvet">Red Velvet Cake</option> <option value="icecream">Ice Cream Cake</option> </optgroup> <optgroup label="Beverages"> <option value="milk">Milk</option> <option value="freshjuice">Fresh Juice</option> <option value="icecream">Ice Cream</option> <option value="coffee">Coffee</option> <option value="carbonated">Carbonated Can Drink</option> <option value="water">Water</option> </optgroup> </select> <label for='status'> Dine In or Take Away : </label> <select ID="status" name='status[]'> <optgroup label="DEFAULT"> <option value="NONE">NONE</option> </optgroup> <optgroup label="STATUS"> <option value="dinein">Dine In</option> <option value="takeaway">Take Away</option> </optgroup> </select> </div> <br/> <div> <label for='foodbeverage2'>Choose a Food/Beverage : </label> <select ID="foodbeverage2" name='foodbeverage[]'> <optgroup label="DEFAULT"> <option value="NONE">NONE</option> </optgroup> <optgroup label="Food"> <option value="chickenchop">Chicken Chop</option> <option value="pasta">Pasta</option> <option value="pizza">Pizza</option> <option value="chocolate">Chocolate Cake</option> <option value="redvelvet">Red Velvet Cake</option> <option value="icecream">Ice Cream Cake</option> </optgroup> <optgroup label="Beverages"> <option value="milk">Milk</option> <option value="freshjuice">Fresh Juice</option> <option value="icecream">Ice Cream</option> <option value="coffee">Coffee</option> <option value="carbonated">Carbonated Can Drink</option> <option value="water">Water</option> </optgroup> </select> <label for='status2'> Dine In or Take Away : </label> <select ID="status2" name="status[]"> <optgroup label="DEFAULT"> <option value="NONE">NONE</option> </optgroup> <optgroup label="STATUS"> <option value="dinein">Dine In</option> <option value="takeaway">Take Away</option> </optgroup> </select> </div> <br/> <input type="submit" value=" GO "/> </form> </div> </body> </html>
And there is your newPage.php file. 并且有您的newPage.php文件。
<!DOCTYPE html>
<html>
<body>
<div align="center">
<?
for ($i = 0; $i < sizeof($_GET['foodbeverage']); $i++) {
echo '<span style="font-size: medium; "><B>Food/Beverage Selected : '
. $_GET['foodbeverage'][$i]
. '</B></span>'
. '<br/><br/>'
. '<span style="font-size: medium; "><B>Dine In/Take Away : '
. $_GET['status'][$i]
. '></B></span><br/><br/>';
}
?>
</div>
</body>
</html>
Hope that helps. 希望能有所帮助。
EDIT : 编辑：
Of course, you are not force to use PHP for the server side. 当然，您不必强迫在服务器端使用PHP。 If you are using some other language it's ok too. 如果您使用其他语言，也可以。
解决方案2
-1 2017-08-25 02:31:41
Try code below: Give different IDs to different dropdowns. 请尝试以下代码：为不同的下拉菜单提供不同的ID。 I am writing code for two dropdowns 我正在为两个下拉菜单编写代码
<input type="submit" id="btngo" value="Go" />
<script type="text/javascript">
$(function () {
$("#btngo").bind("click", function () {
var url = "Page2.htm?foodbeverage=" + encodeURIComponent($("#foodbeverage").val()) + "&status=" + encodeURIComponent($("#status").val());
window.location.href = url;
});
});
</script>
In Second Page: give ID to div say showdata: <div id="showdata" align="center"> 在第二页中：给ID给div说showdata： <div id="showdata" align="center">
<script type="text/javascript">
var queryString = new Array();
$(function () {
if (queryString["foodbeverage"] != null && queryString["status"] != null) {
var data = "<b>Food Beverages:</b> " + queryString["foodbeverage"] + " <b>Dine Takeaway:</b> " + queryString["status"];
$("#showdata").html(data);
}
});
</script>
You can vist this for more information There are four different ways to do this. 您可以访问此以获得更多信息。有四种不同的方法可以执行此操作。
If you don't wanna use jquery then try using localStorage : 如果您不想使用jquery，请尝试使用localStorage ：
localStorage["key"] = value;
... in another page ...
value = localStorage["key"];
visit this page . 访问此页面 。 It has solution for javascript only. 它只有javascript解决方案。
Hope it will help you..!! 希望对您有帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.