HTML - 如何显示＆amp;从下拉菜单直接选择的值到新的HTML页面

时间：2017-08-25 02:18:20

标签： javascript html

如何将HTML页面中的下拉列表中的选定值显示/重定向到新页面？例如，如果我从下拉列表中选择任何值，当我点击＆＃39; GO＆＃39;按钮，页面将定向到显示所选值的新页面。需要帮助。

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

在此页面中，我希望相应地显示/重定向值。

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

解释

根据我的最简单的方法是使用表单和PHP代码来填充其他页面。 为了将数据从一个页面传递到另一个页面，您使用了一个表单。但是你需要将你的选择放入表格中。

然后，为了在第二页显示数据，您需要一些PHP代码。因此，您需要将newPage.html重命名为newPage.php。

运行PHP

然后当然要运行PHP，你需要一台服务器。如果您没有，我建议您安装其中一个：

  • WAMp for Window
  • MAMP适用于Mac
  • XAMP适用于Linux（也适用于Window和Mac。

代码

<!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。如果您使用其他语言也可以。

答案 1 :(得分：-1)

尝试以下代码：为不同的下拉菜单提供不同的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>

在第二页：给div说ID 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有四种不同的方法可以做到这一点。

如果您不想使用jquery，请尝试使用localStorage：

localStorage["key"] = value;

... in another page ...
value = localStorage["key"];

访问this page。它只有javascript的解决方案。

希望它会帮助你...... !!

相关问题
最新问题