将用户重定向到特定 URL，具体取决于提交期间选择的下拉菜单

Question

新手 JavaScript 寻求帮助。（尝试为我的 class 学生设置一个表格来填写）

我正在为 WordPress 开发 Contact form 7。该表格有几个下拉菜单。如果学生在提交时 select 是下拉选项之一，我想将学生重定向到特定的 URL。它比我下面的例子有点复杂。

让我分解一下

例如，假设我有三个下拉菜单，三个下拉菜单之一的选项是“鼠标”、“键盘”和“笔记本电脑”，另一个是“无线鼠标”、“无线键盘”和“ChromeBook” ”，最后一个是“蓝牙鼠标”、“蓝牙键盘”和“Macbook”。

因此，如果第一个下拉菜单中学生 select 是“笔记本电脑”，而在第二个下拉菜单中，他们 select“无线鼠标”，而在另一个下拉菜单中，他们 select“蓝牙键盘”我想将学生重定向到“笔记本电脑”URL，因为“笔记本电脑”是 expensive/highest 并覆盖其他两个。

如果学生没有select输入“笔记本电脑”（或三个下拉列表中任何一个的笔记本电脑）并且select输入“Keyoard”（或任何键盘）至少有一个下拉菜单（这是下一个昂贵的项目）我想重定向到不同的 URL

下面是我最终得到的示例，但注意到 document.getElementById() 一次只支持一个名称，并且仅 returns 一个节点，它无法识别下拉列表select 来自其他两个下拉列表

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"]

我不知道如何继续。我希望我不会发疯。非常感谢专家的任何帮助。

Answer 1

关于您对 getElementById 的评论：

document.getElementById() only supports one name at a time and only returns a single node and it wont work to identify the dropdown selects from the other two dropdowns

我假设您遇到了这个问题，因为您所有的下拉菜单都具有相同的 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 可以正常工作。

Answer 2

document.getElementById() returns 确实只有一个节点，这是有原因的：在适当的 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 语句反映了我对你的问题陈述的理解。如果它不准确，它们应该很容易调整。

将用户重定向到特定 URL，具体取决于提交期间选择的下拉菜单

Redirect User to specific URL depending of selected dropdown during submit

javascript

wordpress

jquery