时间戳

首页 > 解决方案 > JQuery选择更改不显示值的选项

javascript - JQuery选择更改不显示值的选项

问题描述

当我在我的网站中选择一个选项时，它应该提醒选项的值，但在这种情况下，不会提醒该值。

但是，当我在 JSFiddle 中尝试它时，它可以工作。

我正在使用 jQuery 3.4.1 在head标签处加载 jQuery。

我的 javascript 脚本文件位于body标签的底部

HTML 代码

<div class = 'custom-select'>
  <select id = 'choice'>
    <option value = ''></option>
    <option value = 'one' selected>One</option>
    <option value = 'two'>Two</option>
  </select>
</div>

Javascript代码

$(function() {
    $('#choice').change(function() {
        alert($('#choice option:selected').text());
    });
});

请告诉我我错过了什么或做错了什么，谢谢。

标签： javascriptjqueryhtml

解决方案

如果您的内容是动态添加的，您可以尝试以下操作。另外用于val()获取选择框选项。

$(document).on('change', '#choice', (e) => {
   alert($(e.target).val());
});

如果您的内容没有被动态添加，那么只需使用：

$('#choice').on('change', (e) => {
   alert($(e.target).val());
});


$(document).on('change', '#choice', (e) => {
  alert($(e.target).val());
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class='custom-select'>
  <select id='choice'>
    <option value=''></option>
    <option value='one'>One</option>
    <option value='two'>Two</option>
  </select>
</div>

alert($("#choice > option:selected").val());
$("#choice").on("change", (e) => {
    alert(($(e.target).val().length ? $(e.target).val() : "Select Something!"));
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class='custom-select'>
  <select id='choice'>
    <option value=''></option>
    <option value='one' selected>One</option>
    <option value='two'>Two</option>
  </select>
</div>

推荐阅读