Question

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

此页面的主要思想是创建一个包含三个输入字段的搜索表单（所有下拉列表，请参见屏幕截图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的动态页面（因此，第二和第三个首先禁用下拉菜单）。第二个缺点是，我实际上希望第三个下拉列表中的输入选项取决于前两个中的输入。如果访客选择了它的级别和课程，我只希望那些可能对他有用的主题出现。

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

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

向能帮助我的人表示感谢！

Answer 1

您可以在第一个和第二个下拉菜单中添加“任何”选择，这将使用户无法在这些下拉菜单中选择任何内容。这样可以更容易实现。

Answer 2

Cascading Dropdowns 示例应该可以帮助您解决问题 2。

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

2 个答案: