如何获得下拉式选单值变化的下拉式选单资料？

Question

could you please tell me how to get dropdown data on change of dropdown value? 您能告诉我如何获取下拉菜单值变化的下拉菜单数据吗？ I am using this link to make linked dropdown 我正在使用此链接进行链接下拉

https://ampbyexample.com/advanced/linked_dropdowns/ here is my code https://ampbyexample.com/advanced/linked_dropdowns/这是我的代码

when I select first option (ZILA SAHAKRI BANK LIMITED GHAZIABAD).I want data to be loaded in second dropdown from this url 当我选择第一个选项（ZILA SAHAKRI BANK LIMITED GHAZIABAD）时，我希望从该URL的第二个下拉菜单中加载数据

there is data in url 网址中有数据

here is my code 这是我的代码

<!doctype html>
<html ⚡>
<head>
    <title>Linked Dropdowns</title>
    <link rel="canonical" href="https://ampbyexample.com/advanced/linked_dropdowns/">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <!-- #### Setup -->
    <!-- First we include `amp-bind` to track the page state and update the ``<amp-list>` data source. -->
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <!-- Next we include `amp-list` to request and display the dropdowns and their options. -->
    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
    <!-- Finally, we include `amp-mustache` to render the mustache templates inside the `<amp-list>`s. -->
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>

    <style amp-boilerplate>body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both
    }

    @-webkit-keyframes -amp-start {
        from {
            visibility: hidden
        }
        to {
            visibility: visible
        }
    }

    @-moz-keyframes -amp-start {
        from {
            visibility: hidden
        }
        to {
            visibility: visible
        }
    }

    @-ms-keyframes -amp-start {
        from {
            visibility: hidden
        }
        to {
            visibility: visible
        }
    }

    @-o-keyframes -amp-start {
        from {
            visibility: hidden
        }
        to {
            visibility: visible
        }
    }

    @keyframes -amp-start {
        from {
            visibility: hidden
        }
        to {
            visibility: visible
        }
    }</style>
    <noscript>
        <style amp-boilerplate>body {
            -webkit-animation: none;
            -moz-animation: none;
            -ms-animation: none;
            animation: none
        }</style>
    </noscript>

    <style amp-custom>
        label {
            font-weight: bold;
        }

        [role="listitem"] {
            display: flex;
        }

        [role="listitem"] > * {
            flex: 1 0 0;
        }

        amp-list {
            margin: 10px 20px;
            min-width: 240px;
        }

    </style>
</head>
<body>

<div>
    <amp-list width="auto" single-item items="." height="25" layout="fixed-height"
              src="https://biz.com/getlist">
        <template type="amp-mustache">
            <label for="country">Country:</label>
            <select id="country"
                    on="
                  change:
                    AMP.setState({
                      cities: dropdown.data.filter(x => x.text_val == event.value)[0]
                    })">
                 <option value="">Choose country</option>

                {{#data}}
                <option value="{{text_val}}">{{text_val}}</option>
                {{/data}}
            </select>
        </template>
    </amp-list>


    <amp-list width="auto"
              height="25"
              layout="fixed-height"
              single-item items="."
              [src]="cities || 'https://biz.com/bankifddsc/getlist?seo_bank='+cities.seo_val"
              src="https://biz.com/bankifddsc/getlist?seo_bank='+cities.seo_val">
        <template type="amp-mustache">
            <label for="city">City:</label>
            <select [disabled]="!cities"
                    disabled
                    id="city">
                {{#data}}
                <option value="{{seo_val}}">{{text_val}}</option>
                {{/data}}
            </select>
        </template>
    </amp-list>


</div>

</body>
</html>

Answer 1

Try With This: 试试这个：

<!doctype html>
<html ⚡>
<head>
    <title>Linked Dropdowns</title>
    <link rel="canonical" href="https://ampbyexample.com/advanced/linked_dropdowns/">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <!-- #### Setup -->
    <!-- First we include `amp-bind` to track the page state and update the ``<amp-list>` data source. -->
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <!-- Next we include `amp-list` to request and display the dropdowns and their options. -->
    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
    <!-- Finally, we include `amp-mustache` to render the mustache templates inside the `<amp-list>`s. -->
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>

    <style amp-boilerplate>body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both
    }

    @-webkit-keyframes -amp-start {
        from {
            visibility: hidden
        }
        to {
            visibility: visible
        }
    }

    @-moz-keyframes -amp-start {
        from {
            visibility: hidden
        }
        to {
            visibility: visible
        }
    }

    @-ms-keyframes -amp-start {
        from {
            visibility: hidden
        }
        to {
            visibility: visible
        }
    }

    @-o-keyframes -amp-start {
        from {
            visibility: hidden
        }
        to {
            visibility: visible
        }
    }

    @keyframes -amp-start {
        from {
            visibility: hidden
        }
        to {
            visibility: visible
        }
    }</style>
    <noscript>
        <style amp-boilerplate>body {
            -webkit-animation: none;
            -moz-animation: none;
            -ms-animation: none;
            animation: none
        }</style>
    </noscript>

    <style amp-custom>
        label {
            font-weight: bold;
        }

        [role="listitem"] {
            display: flex;
        }

        [role="listitem"] > * {
            flex: 1 0 0;
        }

        amp-list {
            margin: 10px 20px;
            min-width: 240px;
        }

    </style>
</head>
<body>

<div>
    <amp-list width="auto" single-item items="." height="25" layout="fixed-height"
              src="https://example.com/getlist">
        <template type="amp-mustache">
            <label for="country">Country:</label>
            <select id="country"
                    on="change:AMP.setState({cities: event.value})">
                 <option value="">Choose country</option>

                {{#data}}
                <option value="{{seo_val}}">{{text_val}}</option>
                {{/data}}
            </select>
        </template>
    </amp-list>
    <amp-list width="auto"
              height="25"
              layout="fixed-height"
              single-item items="."
              [src]="'https://example.com/getlist?seo_bank='+cities"
              src="https://example.com/getlist?seo_bank=1">
        <template type="amp-mustache">
            <label for="city">City:</label>
            <select [disabled]="!cities"
                    disabled
                    id="city">
                {{#data}}
                <option value="{{seo_val}}">{{text_val}}</option>
                {{/data}}
            </select>
        </template>
    </amp-list>

   </div>

</body>
</html>

Change example.com with your domain 用您的域更改example.com

如何获得下拉式选单值变化的下拉式选单资料？

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-02-28 13:21:57

如何获得下拉式选单值变化的下拉式选单资料？

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-02-28 13:21:57

解决方案1
1 已采纳 2018-02-28 13:21:57