Question

以下代码表示从两个下拉列表中选择的下拉值将被重定向或引用到另一个HTML页面。我已经完成了第一个，但我无法从“状态”下拉菜单中重定向该值。需要帮助。首选语言：Javascript＆amp; HTML。

这是'mainTest.html'页面，其中将显示/选择下拉列表。

  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, " "));
}

<!DOCTYPE html>
<html>

<body>


  <div id="showdata" align="center"></div>

</body>

</html>

这是'newPageTest.html'页面，其中将显示下拉列表的选定值。

  (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.
      location.href = url;
    }

    // Get the button from the DOM.
    var submitButton = document.getElementById('btngo');
    // Add an event listener for the click event.
    submitButton.addEventListener('click', onSubmitClicked);
  })();

<!DOCTYPE html>
<html>

<body>

  <div align="center">

    <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 = "Chicken Chop">Chicken Chop</option>
	<option value = "Pasta">Pasta</option>
	<option value = "Pizza">Pizza</option>
	<option value = "Chocolate Cake">Chocolate Cake</option>
	<option value = "Red Velvet Cake">Red Velvet Cake</option>
	<option value = "Ice Cream Cake">Ice Cream Cake</option>
	</optgroup>
	
	<optgroup label="Beverages">
	<option value = "Milk">Milk</option>
	<option value = "Fresh Juice">Fresh Juice</option>
	<option value = "Ice Cream">Ice Cream</option>
	<option value = "Coffee">Coffee</option>
	<option value = "Carbonated Can Drink">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 = "Chicken Chop">Chicken Chop</option>
	<option value = "Pasta">Pasta</option>
	<option value = "Pizza">Pizza</option>
	<option value = "Chocolate Cake">Chocolate Cake</option>
	<option value = "Red Velvet Cake">Red Velvet Cake</option>
	<option value = "Ice Cream Cake">Ice Cream Cake</option>
	</optgroup>
	
	<optgroup label="Beverages">
	<option value = "Milk">Milk</option>
	<option value = "Fresh Juice">Fresh Juice</option>
	<option value = "Ice Cream">Ice Cream</option>
	<option value = "Coffee">Coffee</option>
	<option value = "Carbonated Can Drink">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 = "Dine In">Dine In</option>
	<option value = "Take Away">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 = "Dine In">Dine In</option>
	<option value = "Take Away">Take Away</option>
	</optgroup>
	</select>
          <br/>

        </td>
      </tr>
    </table>


    <br/>
    <br/>

    <input type="submit" id="btngo" value="Go" />

    <br/>


</body>

</html>

Answer 1

这样做，这将有效

var beverage = document.getElementById('foodbeverage'), status = document.getElementById('status') 

beverageValue = beverage.value, status = status.value,

问题是sstatus变量没有初始化

似乎无法显示下拉值

1 个答案: