javascript - 如何获取下拉值变化的下拉数据？-6ren

javascript - 如何获取下拉值变化的下拉数据？

转载作者：行者123 更新时间：2023-12-03 02:24:06

您能告诉我如何获取下拉值更改时的下拉数据吗？我正在使用此链接来制作链接下拉列表

https://ampbyexample.com/advanced/linked_dropdowns/这是我的代码

当我选择第一个选项(ZILA SAHAKRI BANK LIMITED GHAZIABAD)时。我希望从此网址的第二个下拉列表中加载数据

url中有数据

这是我的代码

<!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>

最佳答案

尝试一下:

<!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>

将 example.com 更改为您的域名

关于javascript - 如何获取下拉值变化的下拉数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49027426/

文章推荐： android - 如何通过Android中的编程实现On()MIC

文章推荐： mysql - 查询中的索引匹配

文章推荐： javascript - JS 分块文件上传与 promise

java - 背景随着淡入淡出而过渡/变化
嘿伙计们。实现背景变化(基本上是幻灯片放映)和过渡效果的常见方法有哪些。我想每隔一段时间改变complte文档背景。我是一名 ASP.net 开发人员，并且希望大部分内容都可以在 ASP 中实现。
c++ - 指针随时间的改进/变化？
也许，指针已经在修改过程中指向 auto_ptr 的常规指针指向 unique_ptr 和 shared_ptr 我只是想知道已经开发出来的新型指针是否完全覆盖了旧版本(或者您可能认为存在内存泄漏问题
Android Fragments 变化
我使用 Android Studio 构建 Android 应用。我的问题是:当 fragment 改变时，应用程序崩溃。控制台输出[控制台] 01-06 18:35:21.952 27756-
javascript - 将鼠标悬停在表行上时如何放大表行？ - 变化
****澄清**我做了这个 [Fiddle] ( http://jsfiddle.net/sggPv/10/ ) 来帮助澄清情况。该脚本起初适用于两个表格，但随后当您点击 slider 并将新表格加
html - float 变化
我有图标，单击它会将新的 div(列)添加到 div 容器。问题是，当新的 div(列)出现时，按钮不会向右移动。是否可以以某种方式仅在 div 内添加 position:fixed？这是我的几个屏
Java编译时接口(interface)变化
我是 Java 新手，继承了现有的 Android 应用程序。原始开发人员选择使用常量接口(interface)。我的问题是我需要更改其中一些常量来编译生产应用程序与开发应用程序。如果我手动修改一些
iOS10 UIColor 变化
在 Apple developer Document 中，我在 UIColor 中发现了一些新东西。 If your app was linked on or after iOS 10 and whe
iphone - ShareKit 变化？
我没有经常使用 ShareKit，但我只想拥有三个共享选项:Facebook、Twitter 和电子邮件。 ShareKit 提供了更多选项，包括更多按钮。但是，我不想要“更多”选项，只想要三个。在
javascript - 高效检测单页应用中的 DOM 变化
我正在构建一个 JS 库，其中一个用例要求我在 DOM 更改时触发一个事件，特别是如果它是一个单页应用程序，例如:github search bar 经过一番研究，我遇到了MutationObserv
Excel 检测并跟踪任何工作表中的(值)变化
我已经设法编写了一个代码来检测任何工作表中特定单元格的值变化，但我一直在努力构建检测和跟踪范围(值)变化的东西。例如，如果用户决定复制和粘贴某个范围的数据(假设超过 1 个单元格)，它不会被宏捕获。
audio - 复杂的音频音量随 ffmpeg 变化
使用 ffmpeg ，我们可以对音频电平进行多少控制？例如，我想在程序的时间轴上映射一个“M”形: t0 - t1 : fade in from 0 to 1 t1 - t2 : play at fu
IE8 中的 jQuery on() 变化
使用 jQuery 1.7.1，我尝试为下拉列表上的更改事件创建一个事件处理程序。下拉列表会动态添加到 DOM 中。似乎在大多数浏览器上都能很好地工作，但是哦，奇怪的 IE8 想要变得困难。有解决方法
delphi - 调整非客户区大小后如何反射(reflect)变化？
我想制作一个具有可选边框大小的自定义控件。请参阅下面的代码。边框绘制在非客户区，其宽度可以是 0、1 或 2 像素。我已经在 WM_NCPAINT 中成功完成了边框绘制。问题是，在更改控制边框大小的属
javascript - 检测 URL 变化
我知道这个问题之前已经被问过，而且我实际上已经找到了一些我已经实现的解决方案。不幸的是，我没能得到我想要的。我以前没有做过AngularJS，我想做的是: 检测网址何时更改根据网址更改的内容进行一
AngularJS 观察 DOM 变化
我有一个 auto-carousel 指令，它循环访问链接元素的子元素。但是，子级尚未加载到 DOM 中，因为它们的 ng-if 表达式尚未解析。如何确保父指令知道其 DOM 树已发生更改？
android - 如何观察协程流的 ContentProvider 变化
我有一个流程可以通过内容提供商从数据库中获取数据。 fun getDataFlow(): Flow { return flow { emit(Result.Loading)
javascript - 文本随动画 jquery 变化
我有一些有效的代码，但有时它只是“跳转”到其他文本而不考虑间隔。该代码基本上按时间间隔更改标题的文本。 var text = ["text1", "text2", "text3","text4","
android - 如何监听 SwitchPreferenceCompat 变化
我正在尝试将 onCLick 监听器添加到我的 PreferenceScreen 上的开关，但它不起作用。我尝试了 Java 教程中的代码并将其转换为 Kotlin，但由于某种原因它无法正常工作。这
build - 升级ffmpeg时处理ffmpeg库接口(interface)变化
我们目前正在尝试升级我们的程序使用的 ffmpeg 版本。跳跃很大，因为我们目前使用的是 ffmpeg 0.8，最新版本是 1.2。在这些测试中，我使用的是(让我说)我发现的令人惊叹的软件包 her
android - 如何观察协程流的 ContentProvider 变化
我有一个流程可以通过内容提供商从数据库中获取数据。 fun getDataFlow(): Flow { return flow { emit(Result.Loading)

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何获取下拉值变化的下拉数据？