如何在AMP中基于品牌-型号联动下拉选择实现用户向对应唯一URL的重定向

Got it, let's fix this so your form redirects to the correct product URL based on the selected model. Here's how to adjust your code step by step:

Step 1: Optimize Your JSON Structure (Optional but Highly Recommended) #

First, your current parallel arrays (ModelName and ProductURL) are error-prone—if you ever reorder items, the URL-model mapping breaks. Let's restructure each brand to have an array of model objects with paired names and URLs:

{
  "brands": [
    {
      "BrandName": "Milwaukee",
      "models": [
        {"name": "2462-20", "url": "https://www.example.com/product-page/example-for-milwaukee-2462-20"},
        {"name": "2551-20", "url": "https://www.example.com/product-page/example-for-milwaukee-2551-20"},
        {"name": "2553-20", "url": "https://www.example.com/product-page/example-for-milwaukee-2553-20"},
        // Add the rest of your Milwaukee models here
      ]
    },
    {
      "BrandName": "Makita",
      "models": [
        {"name": "BTD142", "url": "https://www.example.com/product-page/btd142-for-example"},
        {"name": "DTD129RP", "url": "https://www.example.com/product-page/dtd129rp-for-example"},
        // Add the rest of your Makita models here
      ]
    }
  ]
}

If you can't modify the JSON, we'll cover a workaround later—but this structure is much easier to maintain.

Step 2: Update AMP State & Dropdown Logic #

We need to track the selected brand, then capture the corresponding product URL when a model is chosen. Here's the revised HTML:

For the Restructured JSON: #

<section>
  <div class="linked-dropdown-form">
    <form data-initialize-from-url id="formResetSample" class="field" target="_top">
      <!-- Brand Selection -->
      <amp-list layout="fixed-height" height="25" src="/brands.json" binding="refresh" single-item items="." noloading>
        <template type="amp-mustache">
          <label for="BrandName">Brand:</label>
          <select id="BrandName" on="change: AMP.setState({ selectedBrand: dropdown.brands.filter(x => x.BrandName == event.value)[0] })" data-allow-initialization>
            <option value>Choose a brand</option>
            {{#brands}}
            <option value="{{BrandName}}">{{BrandName}}</option>
            {{/brands}}
          </select>
        </template>
        <div placeholder role="listitem">
          <label for="BrandName">Brand:</label>
          <select disabled>
            <option value>Choose a Brand</option>
          </select>
        </div>
      </amp-list>

      <!-- Model Selection -->
      <amp-list layout="fixed-height" height="25" [src]="selectedBrand ? 'data:' + JSON.stringify(selectedBrand) : '/brands.json'" src="/brands.json" binding="refresh" single-item items="." noloading>
        <template type="amp-mustache">
          <label for="model">Model:</label>
          <select [disabled]="!selectedBrand" disabled id="model" on="change: AMP.setState({ selectedProductUrl: event.target.options[event.target.selectedIndex].dataset.url })" data-allow-initialization>
            <option value>Choose a Model</option>
            {{#models}}
            <option value="{{name}}" data-url="{{url}}">{{name}}</option>
            {{/models}}
          </select>
        </template>
      </amp-list>

      <amp-state id="dropdown" src="/brands.json"></amp-state>
      <button [disabled]="!selectedProductUrl" disabled on="tap:AMP.navigateTo(url=selectedProductUrl)"> Submit </button>
    </form>
  </div>
</section>

If You Can't Modify the Original JSON: #

Adjust the model dropdown's template and onchange logic to map by array index:

<!-- Model Selection for Original JSON -->
<amp-list layout="fixed-height" height="25" [src]="selectedBrand ? 'data:' + JSON.stringify(selectedBrand) : '/brands.json'" src="/brands.json" binding="refresh" single-item items="." noloading>
  <template type="amp-mustache">
    <label for="model">Model:</label>
    <select [disabled]="!selectedBrand" disabled id="model" on="change: AMP.setState({ selectedProductUrl: selectedBrand.ProductURL[event.target.options[event.target.selectedIndex].dataset.index] })" data-allow-initialization>
      <option value>Choose a Model</option>
      {{#ModelName}}
      <option value="{{.}}" data-index="{{@index}}">{{.}}</option>
      {{/ModelName}}
    </select>
  </template>
</amp-list>

Step 3: Key Changes Explained #

1. Track Selected Brand: The brand dropdown now stores the full brand object in selectedBrand state instead of just the model list.
2. Capture Product URL: The model dropdown uses data-url (or data-index for original JSON) to link each model to its URL, which gets stored in selectedProductUrl when selected.
3. Replace Form Submit: Instead of submitting a form to a fixed URL, the button uses AMP.navigateTo to jump directly to the selected product URL. We also disable the button until a valid URL is selected.

Why Your Original Approach Didn't Work #

Your form was set to submit a GET request to a fixed address, which can only append query parameters—not replace the entire URL. AMP requires using its built-in state management and navigation actions to handle dynamic URL redirections safely.

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