2017-08-28 140 views
-1

下面的代碼表示從這兩個下拉列表中選擇的下拉值將被重定向或引用到另一個HTML頁面。我已經完成了第一個,但我無法重定向「狀態」下拉菜單中的值。需要幫助在這一個。首選語言:Javascript & 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"> 
 
\t 
 
\t <optgroup label="DEFAULT"> 
 
\t <option value = "NONE">NONE</option> 
 
\t </optgroup> 
 
\t 
 
\t <optgroup label="Food"> 
 
\t <option value = "Chicken Chop">Chicken Chop</option> 
 
\t <option value = "Pasta">Pasta</option> 
 
\t <option value = "Pizza">Pizza</option> 
 
\t <option value = "Chocolate Cake">Chocolate Cake</option> 
 
\t <option value = "Red Velvet Cake">Red Velvet Cake</option> 
 
\t <option value = "Ice Cream Cake">Ice Cream Cake</option> 
 
\t </optgroup> 
 
\t 
 
\t <optgroup label="Beverages"> 
 
\t <option value = "Milk">Milk</option> 
 
\t <option value = "Fresh Juice">Fresh Juice</option> 
 
\t <option value = "Ice Cream">Ice Cream</option> 
 
\t <option value = "Coffee">Coffee</option> 
 
\t <option value = "Carbonated Can Drink">Carbonated Can Drink</option> 
 
\t <option value = "Water">Water</option> 
 
\t </optgroup> 
 
\t 
 
\t </select> 
 
      <br/> 
 

 
      <font size=2> 
 
      <B>Choose a Food/Beverage : </B> 
 
      </font> 
 

 
      <select ID="foodbeverage"> 
 
\t 
 
\t <optgroup label="DEFAULT"> 
 
\t <option value = "NONE">NONE</option> 
 
\t </optgroup> 
 
\t 
 
\t <optgroup label="Food"> 
 
\t <option value = "Chicken Chop">Chicken Chop</option> 
 
\t <option value = "Pasta">Pasta</option> 
 
\t <option value = "Pizza">Pizza</option> 
 
\t <option value = "Chocolate Cake">Chocolate Cake</option> 
 
\t <option value = "Red Velvet Cake">Red Velvet Cake</option> 
 
\t <option value = "Ice Cream Cake">Ice Cream Cake</option> 
 
\t </optgroup> 
 
\t 
 
\t <optgroup label="Beverages"> 
 
\t <option value = "Milk">Milk</option> 
 
\t <option value = "Fresh Juice">Fresh Juice</option> 
 
\t <option value = "Ice Cream">Ice Cream</option> 
 
\t <option value = "Coffee">Coffee</option> 
 
\t <option value = "Carbonated Can Drink">Carbonated Can Drink</option> 
 
\t <option value = "Water">Water</option> 
 
\t </optgroup> 
 
\t 
 
\t </select> 
 
      <br/> 
 

 
     </td> 
 

 
     <td> 
 
      <font size=2> 
 
      <B>Dine In or Take Away : </B> 
 
      </font> 
 
      <select ID="status"> 
 
\t 
 
\t <optgroup label="DEFAULT"> 
 
\t <option value = "NONE">NONE</option> 
 
\t </optgroup> 
 
\t 
 
\t <optgroup label="Status"> 
 
\t <option value = "Dine In">Dine In</option> 
 
\t <option value = "Take Away">Take Away</option> 
 
\t </optgroup> 
 
\t </select> 
 
      <br/> 
 

 

 
      <font size=2> 
 
      <B>Dine In or Take Away : </B> 
 
      </font> 
 
      <select ID="status1"> 
 
\t 
 
\t <optgroup label="DEFAULT"> 
 
\t <option value = "NONE">NONE</option> 
 
\t </optgroup> 
 
\t 
 
\t <optgroup label="Status"> 
 
\t <option value = "Dine In">Dine In</option> 
 
\t <option value = "Take Away">Take Away</option> 
 
\t </optgroup> 
 
\t </select> 
 
      <br/> 
 

 
     </td> 
 
     </tr> 
 
    </table> 
 

 

 
    <br/> 
 
    <br/> 
 

 
    <input type="submit" id="btngo" value="Go" /> 
 

 
    <br/> 
 

 

 
</body> 
 

 
</html>

+0

''和'

'已經過時的元素。不要使用它們。 'align'屬性也是過時的。你的'

'標籤不匹配。 「
」或「」不應該有結尾斜線。您的腳本標記中的type =不是必需的。 – Rob

+0

@Rob;感謝您的更正(我已更正),但是有沒有解決我的問題的方法? – cerberus99

+0

@ cerberus99所以簡而言之,我可以看到的是,您正在重定向每個選擇。我是否正確?/ – Gardezi

回答

1

做到這一點,這將作品

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

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

的事情是sstatus變量不intialized