AMP：选择另一个元素中的选项和更改选项

Question

这是用AMP HTML编写的。

有两个列表包含所有状态，然后是一些额外的。这些列表有50多种选择。

有一个用于计费信息的列表和一个用于目的地状态的列表。

当一个人在结算清单上选择一个州时，我希望目的地列表更改为该状态。运输状态列表应该能够由用户更改。

以下是包含一些选项的示例代码，而不是所有选项。我认为我将选定的“结算状态”捕获为“billstate”，但不知道如何在“目的地状态”中选择它。

在AMP文档中，我没有看到任何我可以绑定的内容，如[selected] =“selectedbillstate”。那么，代码如何找到正确的状态才能更改为“已选择”？并且，我将如何指定以指示要选择的目标状态。

<label for "state">Billing State</label>
<select name="state" id="state" required on="input-debounced:AMP.setState({billstate: event.value })">
    <option value="" disabled selected>Select the State</option>
    <option value="APO-AP">APO</option>
    <option value="FPO">FPO</option>
    <option value="AK">Alaska</option>
    <option value="AL">Alabama</option>
</select>

<label for "sstate">Destination State</label>
<select name="sstate" id="sstate" required >
    <option value="" disabled selected>Select the State</option>
    <option value="APO-AP" >APO</option>
    <option value="FPO">FPO</option>
    <option value="AK">Alaska</option>
    <option value="AL">Alabama</option>
</select>

Answer 1

谢谢。我发现了另一种方式。 AMP人员说有一个[选定] var。这是结算选择：

<select name="state" id="state" required="" on="input-debounced:AMP.setState({billstate: event.value })">

这是送货方式。 sstate == null是为了防止在客户更改结算状态时更改运送选项。

<select name="country" id="country" required="" on="input-debounced:AMP.setState({billcountry: event.value })">
<option value="APO-AP" [selected]="billstate==\'APO-AP\' && sstate==null" >APO</option>

Answer 2

<option value="APO-AP" on="tab:AMP.setState({sstatelist: true })"> APO</option>
...
<select name="sstate" id="sstate" required [disabled]="sstatelist ? true : false">

基本上你是在创建一个变量“sstatelist”，默认设置为false。选择<option>时，禁用状态设置为false，因此启用<select>元素。