如何用jQuery实现HTML下拉框切换时打印选项值或Hello World

嘿，你的代码其实只差一点点调整就能实现想要的效果啦！先提个小细节：你写的jQuery选择器里select[name='pay']:多了个多余的冒号，这会导致事件绑定失效，得把它去掉才行。

下面分别给你实现两种需求的完整代码：

一、点击对应选项输出对应文本（选A输出'A'，选B输出'B'） #

这种情况我们只需要获取当前选中的下拉框值，然后打印出来就好：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pm">
  <select name="pay">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
</div>

<script>
$('.pm').on('change', "select[name='pay']", function() {
  // 获取当前选中的选项值并打印
  console.log($(this).val());
});
</script>

二、点击任意选项输出固定文本'HELLO WORLD' #

这个更简单，只需要修正选择器后，直接打印固定字符串即可：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pm">
  <select name="pay">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
</div>

<script>
$('.pm').on('change', "select[name='pay']", function() {
  console.log('HELLO WORLD');
});
</script>

小补充：这里用了事件委托的方式绑定事件，好处是即使后续通过JS动态添加这个下拉框，事件依然能正常触发哦～

内容的提问来源于stack exchange，提问作者user_123