AMP: выберите вариант и измените его в другом элементе

Это написано с помощью 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>

person Mindy    schedule 08.04.2019    source источник


Ответы (2)


Спасибо. Я нашла другой способ. Ребята из AMP сказали, что ЕСТЬ [selected] 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>
person Mindy    schedule 13.04.2019

<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› становится активным.

person user3674177    schedule 12.04.2019
comment
Ответы только на код не приветствуются. Пожалуйста, объясните, как это решает проблему. Из отзыва - person Nick; 13.04.2019
comment
Ваш ответ пришел в сообщениях более низкого качества. Пожалуйста, дайте объяснение, даже если ваш код не требует пояснений. - person Harsha Biyani; 13.04.2019