Question

我需要将下拉列表的选定值从HTML页面显示/重定向到新页面。代码无法执行。需要帮助（使用javascript）。

这些是'mainTest.html'文件的代码。我在将页面重定向到另一个HTML页面时遇到了失败。

< script type = "text/javascript" >
  (function() {
    /**
     * Handles the click of the submit button.
     */
    function onSubmitClicked(event) {
      // Get the input element from the DOM.
      var beverage = document.getElementById('foodbeverage'),
        // Get the value from the element.
        beverageValue = beverage.value,
        // Construct the URL.
        url = 'newPageTest.html?foodbeverage=' + encodeURIComponent(beverageValue) + '&status=' + encodeURIComponent(status);

      // Instead of going to the URL, log it to the console.
      console.log('goto to URL: ', url);
    }

    // Get the button from the DOM.
    var submitButton = document.getElementById('btngo');
    // Add an event listener for the click event.
    submitButton.addEventListener('click', onSubmitClicked);
  })(); <
/script>

<!DOCTYPE html>
<html>

<body>

  <div align="center"></div>

  <center>
    <h4 style="color:darkblue">Choose Your Food/Beverage & Quantity : </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="foodbeverage1"> 
	
	<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="status1"> 
	
	<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/>
  <br/>

  <input type="submit" id="btngo" value="Go" />

  <br/>
</body>

</html>

这些是“newPageTest.html”文件的代码，其中将显示所选的下拉值。

< script type = "text/javascript" >
  window.onload = passParameters;

//Function to update "showdata" div with URL Querystring parameter values
function passParameters() {
  var foodbeverage = getParameterByName("foodbeverage");
  var status = getParameterByName("status");
  if (foodbeverage != null && status != null) {
    var data = "<b>Food Beverages:</b> " + foodbeverage + " <b>Dine Takeaway:</b> " + status;
    document.getElementById("showdata").innerHTML = data;
  }
}
//Get URL parameter value
function getParameterByName(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
} <
/script>

<!DOCTYPE html>
<html>

<body>


  <div id="showdata" align="center"></div>
  <font size=6>
    <B>Food/Beverage Selected : </B>
  </font>

  <br/>
  <br/>

  <font size=6>
    <B>Dine In/Take Away : </B>
  </font>

  <br/>
  <br/>


</body>

</html>

Answer 1

在onSubmitClicked方法中，您需要：

获取状态元素，就像从DOM
在尝试在encodeURIComponent(status)
在console.log行的位置，将该代码替换为将更改URL的代码。

第二页：

不要使用font标签，而是使用CSS。
将ID分配给要在
从onSubmitClicked方法
获得元素后，您可以myElement.textContent = <text>显示页面中的值。

Answer 2

您的代码不会在任何地方重定向。您必须在此行之后添加location.href = url;

url = 'newPageTest.html?foodbeverage=' + encodeURIComponent(beverageValue) + '&status=' + encodeURIComponent(status);

将dropdownlist项的值作为查询字符串传递给另一个页面

2 个答案: