JavaScript 新手尋求幫助。（試圖設定一個表格讓我班的學生填寫）
我正在為 WordPress 撰寫聯系表格 7。該表單有幾個下拉選單。如果學生在提交時選擇下拉選項之一，我想將學生重定向到特定的 URL。根據我下面的示例，它比這有點復雜。
讓我分解一下
例如，假設我有三個下拉選單，在三個下拉選單之一中，選項是“滑鼠”、“鍵盤”和“筆記本電腦”，另一個是“無線滑鼠”、“無線鍵盤”和“ChromeBook”，最后一個分別是“藍牙滑鼠”、“藍牙鍵盤”和“Macbook”。
因此，如果學生在第一個下拉選單中選擇“筆記本電腦”，在第二個下拉選單中選擇“無線滑鼠”，在另一個下拉選單中選擇“藍牙鍵盤”，我想將學生重定向到“筆記本電腦”網址，因為“筆記本電腦”價格昂貴/highest 并覆寫其他兩個。
如果學生沒有選擇“筆記本電腦”（或任何三個下拉選單中的任何一個筆記本電腦）并且在至少一個下拉選單中選擇了“Keyoard”（或任何鍵盤）（這是下一個昂貴的專案）我想要重定向到不同的 URL
下面是我最終得到的示例，但注意到 document.getElementById() 一次僅支持一個名稱，并且僅回傳一個節點，并且無法從其他兩個下拉串列中識別下拉選擇
JAVASCRIPT
document.addEventListener( 'wpcf7mailsent', function( event ) {
var lpLocation = document.getElementById("basicitems").value;
if (lpLocation == "Mouse") {
location = 'https://google.com';
} else if (lpLocation == "Keyboard") {
location = 'https://facebook.com';
}
}, false );
HTML
<label> <h1>Items you need</h1>
[select* Items id:basicitems "Mouse" "Keyboard" "Laptop"]
</label>
<label> <h1> Wireless Items you need</h1>
[select* WirelessItems id:wirelessitems "Wireless Mouse" "Wireless Keyboard" "Chromebook"]
</label>
<label> <h1> Bluetooth Items you need</h1>
[select* BluetoothItems id:bluetoothitems "Bluetooth Mouse" "Bluetooth Keyboard" "Macbook"]
</label>
[submit "Submit"]
我無法理解如何進行。我希望我不會發瘋。專家的任何幫助將不勝感激。
uj5u.com熱心網友回復：
確實document.getElementById()只回傳一個節點，這是有原因的：在正確的 html 中，id 是唯一的，每個 id 應該只存在于一個元素上。在您的情況下，您需要按 id 執行 3 個不同的查詢：
document.addEventListener('wpcf7mailsent', function (event) {
const basicItemsSelection = document.getElementById("basicitems").value;
const wirelessItemsSelection = document.getElementById("wirelessitems").value;
const bluetoothItemsSelection = document.getElementById("bluetoothitems").value;
if (basicItemsSelection === 'Laptop' || wirelessItemsSelection === 'Chromebook'
|| bluetoothItemsSelection === 'Macbook') {
window.location = 'some_laptop_url';
} else if (basicItemsSelection === 'Keyboard' || wirelessItemsSelection === 'Wireless Keyboard'
|| bluetoothItemsSelection === 'Bluetooth Keyboard') {
window.location = 'some_keyboard_url';
} else {
window.location = 'some_other_url';
}
}, false);
隨后的 if 陳述句反映了我對您的問題陳述的理解。如果它不準確，它們應該很容易調整。
uj5u.com熱心網友回復：
關于您的評論getElementById：
document.getElementById() 一次僅支持一個名稱，并且僅回傳一個節點，并且無法識別從其他兩個下拉串列中選擇的下拉串列
我假設你有這個問題，因為你所有的下拉選單都有相同的 id。嘗試給他們每個人一個唯一的 id：
<select id="dropdown1">...</select>
<select id="dropdown2">...</select>
現在，如果我們在提交時運行以下代碼：
let dropdown1 = document.getElementById('dropdown1');
let dropdown2 = document.getElementById('dropdown2');
dropdown1.value并dropdown2.value包含它們各自下拉串列的值。至于條件邏輯，我相信你可以用一個 if/else 樹來完成你想要的。
if(dropdown1.value === 'laptop') {
// First in if/else tree because most expensive
window.location.href = 'http://google.com';
} else if(dropdown2.value === 'keyboard') {
// Second in if/else tree because second most expensive
// chromebook redirect here
}
// Conditional logic continues...
此處提供演示：https ://jsfiddle.net/85wkscn4/11/ 。重定向在 JS Fiddle 中不起作用，但在獨立的 HTML 檔案設定中window.location.href可以正常作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/450483.html