1
下面是我的代碼，它允許用戶從下拉列表中選擇多個值，當用戶單擊按鈕「開始」時，選定的值將顯示在新的頁。我也爲這兩個屬性創建了類，以便列出所選的值。多個下拉值不會在新的HTML頁面中顯示
不幸的是，當選擇後點擊按鈕時，沒有任何顯示。需要幫助。
「mainTest.html」頁面。
< script type = "text/javascript" >
(function() {
/**
* Handles the click of the submit button.
*/
function onSubmitClicked(event) {
var url = 'newPageTest.html?';
var foodbevs = document.getElementsByClassName('foodbeverage');
for (var i = 0; i < foodbevs.length; i++) {
if (i > 0) url += '&';
url += 'foodbeverage=' + encodeURIComponent(foodbevs[i].value);
}
var statuses = document.getElementsByClassName('status');
for (i = 0; i < statuses.length; i++) {
url += '&status=' + encodeURIComponent(statuses[i].value);
}
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);
})();
<
/script><!DOCTYPE html>
<html>
<body>
<h4 style="color:darkblue">Choose Your Food/Beverage & Quantity : </h4>
<table>
<tr>
<td>
<B>Choose a Food/Beverage : </B>
<select class="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/>
<B>Choose a Food/Beverage : </B>
<select class="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>
<B>Dine In or Take Away : </B>
<select class="status">
\t <optgroup label="DEFAULT">
\t <option value = "NONE">NONE</option>
\t </optgroup>
\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/>
<B>Dine In or Take Away : </B>
<select class="status">
\t <optgroup label="DEFAULT">
\t <option value = "NONE">NONE</option>
\t </optgroup>
\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>「newPageTest.html」 頁面。
< script type = "text/javascript" >
function parseQuery(str) {
if (typeof str != "string" || str.length == 0) return {};
var s = str.split("&");
var s_length = s.length;
var bit, query = {},
first, second;
for (var i = 0; i < s_length; i++) {
bit = s[i].split("=");
first = decodeURIComponent(bit[0]);
if (first.length == 0) continue;
second = decodeURIComponent(bit[1]);
if (typeof query[first] == "undefined") query[first] = second;
else if (query[first] instanceof Array) query[first].push(second);
else query[first] = [query[first], second];
}
return query;
}
//Function to update "showdata" div with URL Querystring parameter values
function passParameters() {
window.onload = passParameters;
var query = parseQuery(window.location.search);
var data = "<b>Food Beverages:</b> " + query.foodbeverage + " <b>Dine/Takeaway:</b> " + query.status;
document.getElementById("showdata").innerHTML = data;
}
<
/script><!DOCTYPE html>
<html>
<body>
<div id="showdata"></div>
</body>
</html>
你的第一個片段沒有運行，可以先修正錯誤？ – Thijs
我似乎無法找到錯誤，但它是可行的。 – cerberus99