文章/答案/技术大牛

发布

社区首页 >问答首页 >如何获取<ion-select> no jQuery的值

问如何获取<ion-select> no jQuery的值
EN

Stack Overflow用户

提问于 2020-12-30 08:41:53

回答 2查看 79关注 0票数 0

我有一个用户表单，其中用户可以从三个国家/地区中进行选择，并以警报的形式将其显示给用户。它看起来像这样：

function myFunction() {
  //alert back to user
  alert(document.getElementById("options").value)
}

<head>
  <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" />

</head>

<ion-list>
  <ion-item style="display: none;">
    <ion-label style="display: none;">
      Select Region
    </ion-label>
    <ion-select style="display: none;" id="options">
      <ion-select-option>USA</ion-select-option>
      <ion-select-option>UK</ion-select-option>
      <ion-select-option>Canada</ion-select-option>
    </ion-select>
  </ion-item>
</ion-list>

<button onclick="myFunction()">Click to retrieve</button>

同样，正如标题所暗示的那样，我不想使用jquery，我只想使用原生的Vanilla JavaScript。

我该怎么做呢？

javascript

ionic-framework

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-30 09:01:08

这是您的代码，删除了style="display: none"，显示了select。

代码运行良好，但在您选择其中一个选项之前，警告显示为“undefined”。

const opts = document.getElementById("options");

function myFunction() {
  alert('ion-select value: ' + opts.value);
}

// listen for changes to the ion-select
opts.addEventListener('ionChange', function () {
  console.log('ion-select ionChange detected');
});

<head>
  <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" />

</head>

<ion-list>
  <ion-item>
    <ion-label>
      Select Region
    </ion-label>
    <ion-select id="options">
      <ion-select-option>USA</ion-select-option>
      <ion-select-option>UK</ion-select-option>
      <ion-select-option>Canada</ion-select-option>
    </ion-select>
  </ion-item>
</ion-list>

<button onclick="myFunction()">Click to retrieve</button>

票数 1

Stack Overflow用户

发布于 2020-12-30 08:54:19

看起来你在做正确的事情，但是，你有没有尝试为每个选项设置一个值？

喜欢

<ion-select-option value=“USA”>USA</ion-select-option>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65500595

复制

相似问题

问如何获取<ion-select> no jQuery的值
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获取<ion-select> no jQuery的值EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获取<ion-select> no jQuery的值
EN