[英]HTML - How To Display & Direct Selected Values From Drop Down Menu To A New HTML Page
如何将下拉列表中的所选值从HTML页面显示/重定向到新页面？ 例如，如果我从下拉列表中选择任何值，并且当我单击“ GO”按钮时，该页面将被定向到一个新页面，并显示所选值。 在这方面需要帮助。
<!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>
在此页面中，我希望相应地显示/重定向值。
<!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>
对我来说，最简单的方法是使用表单和PHP代码填充另一页。 为了将数据从一页传递到另一页，您使用了一种表单。 但是您需要将选择内容放入表单中。
然后，为了在第二页中显示数据，您需要一些PHP代码。 因此，您需要将newPage.html重命名为newPage.php 。
运行PHP
然后，当然要运行PHP，您将需要服务器。 如果没有，我建议您安装其中之一：
<!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>
并且有您的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>
希望能有所帮助。
编辑：
当然，您不必强迫在服务器端使用PHP。 如果您使用其他语言，也可以。
请尝试以下代码：为不同的下拉菜单提供不同的ID。 我正在为两个下拉菜单编写代码
<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>
在第二页中：给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>
您可以访问此以获得更多信息。有四种不同的方法可以执行此操作。
如果您不想使用jquery，请尝试使用localStorage ：
localStorage["key"] = value;
... in another page ...
value = localStorage["key"];
访问此页面 。 它只有javascript解决方案。
希望对您有帮助。
如何基于从下拉菜单中选择的选项以HTML显示文本？
[英]How do I display Text in HTML based on an option selected from a Drop-Down Menu?
DJANGO HTML模板：如何知道下拉菜单中的选定项目并在html页面中显示而无需任何操作
[英]DJANGO HTML TEMPLATES : How to know Selected item in drop Down and display In the html page without any action
有没有办法使用选定的选项更改HTML显示，从下拉菜单中不刷新？
[英]Is there a way to change HTML display with a selected option, from drop down menu without refreshing?
如何从html下拉列表菜单中仅打印一个选项的选定值
[英]How to print the selected value of only one option from html drop down list menu
如何使用 html、css 和 javascript 从下拉列表中显示所选项目
[英]How to display selected item from drop down using html, css and javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.