如何获取jQuery填充的HTML下拉选框选中项内指定元素内容？

你的问题在于$(this).val()获取的是选中<option>标签的value属性值，而不是该选项内部<small>元素的文本内容。要拿到目标内容，我们需要先定位到选中的<option>，再在它里面找到对应的<small>元素，最后提取文本。

正确的实现代码 #

$(document).ready(function () {
  $('#dropdown').on('change', function() {
    // 定位到当前选中的option元素
    const selectedOpt = $(this).find('option:selected');
    // 找到option内部的.text-muted元素并提取文本（trim()去除多余空格）
    const targetText = selectedOpt.find('.text-muted').text().trim();
    alert(targetText);
  });
});

关键说明 #

• $(this).find('option:selected')：从当前下拉框中筛选出被选中的<option>元素。
• .find('.text-muted')：在选中的<option>内部查找带有text-muted类的<small>元素。
• .text().trim()：提取该元素的文本内容，并去除前后可能存在的空白字符，避免输出多余空格。

因为你的下拉框是通过jQuery Get动态填充的，而你使用的$('#dropdown').on('change')是直接绑定在下拉框本身上的事件，这种写法对动态添加的选项也能生效，不需要额外调整事件绑定方式。

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