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

Posted 2023-02-22

【中文标题】如何在 Wix 中使用 JavaScript 代码构建动态搜索表单？

【英文标题】：How to build a dynamic search form using JavaScript code in Wix?

【发布时间】：2019-05-14 16:24:06

【问题描述】：

目前，我们正在我们的网站 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 包含所有三个选项（因此第二个和第三个下拉菜单首先被禁用）。第二个缺点是我实际上希望第三个下拉列表中的输入选项取决于前两个下拉列表中的输入。如果访问者选择了它的级别和课程，我只希望那些可能对他有用的主题出现。

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

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

感谢能帮助我的人一百万！

【参考方案1】：

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

【讨论】：

谢谢！还没想出这个主意。这至少应该解决我的问题中较容易的一半。 :)

【参考方案2】：

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