时间戳

首页 > 解决方案 > Ionic 5：更改事件不适用于 ion-select Javascript

javascript - Ionic 5：更改事件不适用于 ion-select Javascript

问题描述

我刚刚开始使用这个 Ionic 框架并将其与普通 JS 一起使用。我有一个问题，当我在选择框中选择某些东西时，我的 JS 函数没有被触发，也不知道为什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
            integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>


    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
<script>
    function changeDate() {
        alert('change date');
    }
</script>

</head>
<body>
<ion-app>
    <ion-tabs>

        <ion-tab tab="view">
            <ion-item color="dark">
                <ion-label class="white-text">Date Range</ion-label>
                <ion-select ionChange="changeDate()" id="airportsDateChanger" value="all">
                    <ion-select-option value="all">All</ion-select-option>
                    <ion-select-option value="sevendays">Last 7 Days</ion-select-option>
                    <ion-select-option value="lastthirty">Last 30 Days</ion-select-option>
                    <ion-select-option value="lastninety">Last 90 Days</ion-select-option>
                    <ion-select-option value="pastyear">Past Year</ion-select-option>
                    <ion-select-option value="custom">custom</ion-select-option>
                </ion-select>
            </ion-item>
</ion-app>
</body>
</html>

标签： javascripthtmlionic-framework

解决方案

您必须在脚本标签中添加一个事件监听器来监听ion-select.

<script>
  function changeDate() {
    alert('change date');
  }
  document.getElementById('airportsDateChanger').addEventListener('ionChange', changeDate);
</script>

推荐阅读