javascript - 如何在 Wix 中使用 JavaScript 代码构建动态搜索表单？

Question

目前，我们正在我们的网站 www.dptwiskunde.nl 上构建一个新部分，该部分是使用 Wix 构建的。在其中一个页面(访问者尚不可见)上，我们希望访问者能够搜索与他们特别相关的文档(即过去的试题)。

此页面的主要思想是创建一个包含三个输入字段的搜索表单(所有下拉列表，请参见屏幕截图 1)。因此，访问者应该找到所有满足他们选择的 level (niveau)、course (vak) 和 subject (onderwerp) 的文档。

这超出了 Wix 为我们提供的功能，因此我必须使用 JavaScript 代码(我以前从未使用过)来实现此搜索表单

作为初学者，我想到了以下代码:

import wixLocation from 'wix-location';

export function dropdown1_change_1(event, $w) {
    $w("#dropdown2").enable();
    $w("#dropdown3").enable();
    $w("#dropdown3").disable();
    $w("#button21").enable();
    $w("#button21").disable();
}

export function dropdown2_change_1(event, $w) {
    $w("#dropdown3").enable();
}

export function dropdown3_change_1(event, $w) {
    $w("#button21").enable();
}

$w.onReady(function () {
    $w("#button21").onClick( (event, $w) => { 
    let searchValue = $w("#dropdown1").value;
    let searchValue2 = $w("#dropdown2").value;
    let searchValue3 = $w("#dropdown3").value;
    wixLocation.to("https://rpunder.wixsite.com/dptwiskunde/online-Examenopgaven/Niveau/" + searchValue + searchValue2 + searchValue3);
[enter image description here][1]});
});

此代码的主要缺点是它不允许访问者仅从一个或两个下拉列表中选择选项，因为我将他们发送到一个动态页面，该页面的 url 包括所有三个选项(因此第二个和第三个下拉列表首先被禁用)。第二个缺点是我实际上希望第三个下拉列表中的输入选项取决于前两个下拉列表中的输入。如果访问者选择它的级别和类(class)，我只希望那些可能对他有用的主题出现。

我看了很多教学视频，但似乎没有一个能帮助我解决这个问题。这里有人可以这样做吗？快速回顾一下问题:

1. 访问者应该只能选择一两个输入并找到相关结果；
2. 第三个下拉列表中的输入选项应取决于前两个下拉列表中的输入。

非常感谢能帮助我的人!

Answer 1

您可以在第一个和第二个下拉菜单中添加“任意”选项，这样用户就可以在这些下拉菜单中不选择任何内容。这可能更容易以这种方式实现。