响应式模式下Supreme移动端网站尺码选项选择问题求助

Hey there! Let's figure out why your JavaScript code isn't working for selecting sizes on Supreme's mobile page, while it works perfectly on desktop.

First, let's break down the common issues here and walk through solutions:

1. Double-Check Your Selector (Mobile DOM is Often Different) #

Desktop and mobile versions of sites almost always have distinct DOM structures. The #size-options selector you're using might not target the right element, or the element might load dynamically after your code runs.

Open Chrome DevTools in mobile mode, inspect the size dropdown, and confirm the exact selector for the size control—whether it's a native <select> or a custom-styled component.

2. Native Select Needs a change Event Trigger #

If you're targeting a native <select> element, just setting selected = "selected" might not be enough. Most e-commerce sites rely on the change event to update page logic (like enabling the "Add to Cart" button).

Try this code instead:

// Wait for the DOM to fully load before running
document.addEventListener('DOMContentLoaded', () => {
  const sizeSelect = document.querySelector("#size-options");
  if (sizeSelect) {
    // nth-child(2) maps to index 1 (JS uses 0-based indexing)
    sizeSelect.selectedIndex = 1;
    // Manually trigger the change event to activate page-side logic
    sizeSelect.dispatchEvent(new Event('change'));
  }
});

3. Custom Dropdown UI (Not a Native Select) #

Supreme might use a custom-styled dropdown on mobile—hiding the native <select> behind divs or buttons. In this case, you'll need to simulate user actions: first click the dropdown to reveal options, then click your desired size.

Adjust the selectors below to match the actual mobile DOM (use DevTools to find them):

document.addEventListener('DOMContentLoaded', () => {
  // Click the dropdown button to expand size options
  const sizeDropdownBtn = document.querySelector('.mobile-size-toggle');
  if (sizeDropdownBtn) {
    sizeDropdownBtn.click();
    
    // Wait a small amount for options to render, then click the second size
    setTimeout(() => {
      const targetSize = document.querySelector('.size-option-list li:nth-child(2)');
      if (targetSize) {
        targetSize.click();
      }
    }, 200); // Tweak the timeout if options take longer to load
  }
});

4. Handle Dynamically Loaded Elements #

If the size options load asynchronously (after the initial page load), use a MutationObserver to wait for the element to exist instead of relying on DOMContentLoaded:

// Set up an observer to watch for the size select element
const observer = new MutationObserver((mutations) => {
  const sizeSelect = document.querySelector("#size-options");
  if (sizeSelect) {
    sizeSelect.selectedIndex = 1;
    sizeSelect.dispatchEvent(new Event('change'));
    observer.disconnect(); // Stop observing once the task is done
  }
});

// Start observing the body for changes in child elements
observer.observe(document.body, { childList: true, subtree: true });

Key Takeaways #

• Always verify selectors in mobile DevTools—never assume they match the desktop version.
• Native selects often require a manual change event trigger to activate page logic.
• Custom dropdowns need simulated user clicks (open first, then select).
• Use observers for elements that load dynamically after the page initializes.

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