Wix平台下拉菜单选中值联动文本显示实现方案咨询

Hey there! Let's get that dynamic content switching working for your number dropdown on Wix. I'll cover two common scenarios depending on how you've added your dropdown—pick the one that fits your setup:

Scenario 1: Using Wix's Native Dropdown Element #

This is the simplest approach if you can replace your custom HTML select with Wix's built-in dropdown component.

Step 1: Set Up Your Elements in the Editor #

• Add a dropdown element to your page (go to Add > Input > Dropdown).
• Edit the dropdown's options to match your values: set each option's value and display text to 1, 2, 3, 4, 5.
• Give the dropdown a clear ID (e.g., numberDropdown) via the right-click menu > Set ID.
• Add the content elements you want to switch (text boxes, containers, images, etc.). Give each a unique ID like content1, content2, ..., content5. Hide all except your default content (e.g., content1) initially.

Step 2: Add the Velo Code #

Open the page's code panel (click the code icon on the left sidebar) and paste this code:

$w.onReady(function () {
  // Initialize: Show default content on page load
  showContent(1);

  // Listen for dropdown selection changes
  $w('#numberDropdown').onChange((event) => {
    const selectedValue = parseInt(event.target.value);
    showContent(selectedValue);
  });
});

// Function to handle content visibility
function showContent(selectedNumber) {
  // Hide all content elements first
  for (let i = 1; i <= 5; i++) {
    $w(`#content${i}`).hide();
  }
  // Show the matching content
  $w(`#content${selectedNumber}`).show();
}

Notes: #

• Double-check that the IDs in your code match exactly what you set in the editor (capitalization matters!).
• If your content is more complex (e.g., dynamic data from a database), you can extend the showContent function to handle that too.

Scenario 2: Using Your Custom HTML Dropdown #

If you need to keep your original HTML <select> (embedded via Wix's HTML iframe component), you'll need to use message passing between the iframe and the Wix page.

Step 1: Update Your HTML Component #

Edit your HTML component's code to include a message sender when the selection changes:

<select id="numberSelect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<script>
  const selectElement = document.getElementById('numberSelect');
  
  // Send selected value to Wix page on change
  selectElement.addEventListener('change', (e) => {
    window.parent.postMessage({ selectedValue: parseInt(e.target.value) }, "*");
  });
</script>

Step 2: Add Wix Page Code to Receive Messages #

In your page's code panel, add this code to listen for the message and switch content:

import wixWindow from 'wix-window';

$w.onReady(function () {
  // Initialize default content
  showContent(1);

  // Listen for messages from the HTML component
  wixWindow.onMessage((event) => {
    if (event.data.selectedValue) {
      showContent(event.data.selectedValue);
    }
  });
});

// Reuse the same content switching function as Scenario 1
function showContent(selectedNumber) {
  for (let i = 1; i <= 5; i++) {
    $w(`#content${i}`).hide();
  }
  $w(`#content${selectedNumber}`).show();
}

Notes: #

• The postMessage wildcard ("*") works for testing, but for production, you can replace it with your Wix site's URL for better security.

内容的提问来源于stack exchange，提问作者Sharon Shreger