jQuery如何获取select下拉菜单中被点击option的文本内容

HTML代码问题 #

• 所有<option>标签使用了重复的id="search"，HTML规范要求页面内id必须唯一，重复id会导致DOM选择器行为异常，建议删除重复id或改用class="search"标识。

第一版JS代码问题 #

• init函数在$(document).ready()中执行时，函数内的$(this)指向document对象，声明的me、meIndex变量无实际作用，属于无效代码
• 给select绑定click事件不合理：用户通过键盘切换选项等操作无法被click事件捕获，应该使用change事件监听选项变更
• 事件回调内$('option')会选中页面所有option元素，调用text()会拼接所有option的文本内容，无法获取当前选中的单个option文本

第二版JS代码问题 #

• 同样存在init内$(this)指向document的问题，me实际是document对象，给document绑定点击事件完全不符合需求
• 没有任何定位select元素、获取选中option的逻辑，输出的me.text()是整个文档的文本内容，和目标需求无关

使用jQuery监听select的change事件，获取当前选中的option文本即可，代码如下：

function init() {
  // 可通过id选择器精准定位目标select：$('#yui_3_17_2_1_1631285726939_22')
  $('select[name="ciao"]').change(function() {
    // 获取当前选中的option的文本
    const selectedText = $(this).find('option:selected').text();
    console.log(selectedText);
    // 后续业务逻辑写在此处即可
  })
}

$(document).ready(init);

如果需要严格监听option的点击动作，也可以直接给option绑定点击事件：

function init() {
  $('select[name="ciao"] option').click(function() {
    console.log($(this).text());
  })
}

$(document).ready(init);

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