如何在 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 的動態頁面（因此，第二個和第三個下拉列表被禁用首先）。 第二個缺點是我實際上希望第三個下拉列表中的輸入選項取決於前兩個下拉列表中的輸入。 如果訪問者選擇其級別和課程，我只希望那些可能對他有用的主題出現。

我看了很多教學視頻，但似乎沒有一個能幫助我解決這個問題。 這里有人可以嗎？ 簡單回顧一下問題：

1. 訪問者應該只能選擇一兩個輸入並找到相關結果；
2. 第三個下拉列表中的輸入選項應取決於前兩個下拉列表中的輸入。

感謝可以幫助我的人一百萬！

Answer 1

您可以在第一個和第二個下拉列表中添加“任何”選項，這將允許用戶不選擇這些下拉列表中的任何內容。 這可能更容易以這種方式實現。

Answer 2

級聯下拉菜單示例應該可以幫助您解決問題 2。