如何使用JavaScript提取下拉选择框（select）的选项文本？

嘿，我来帮你搞定这个提取下拉选项文本的问题！你已经拿到了选中值，现在只需要再加一行代码就能获取对应的文本内容啦。

两种可行的实现方法 #

方法一：使用jQuery的选择器

你可以通过find("option:selected")定位到当前选中的选项，再调用.text()方法拿到它的文本：

$(".pick-chart").change(function(e) {
  e.preventDefault();
  var val = $(this).val();
  // 提取选中选项的文本
  var name2 = $(this).find("option:selected").text();
  
  // 测试输出看看结果
  console.log("选中的值：", val);
  console.log("选中的文本：", name2);
});

方法二：原生JavaScript实现（无需jQuery）

如果你不想依赖jQuery，也可以直接用原生JS的属性来获取，效率还更高：

$(".pick-chart").change(function(e) {
  e.preventDefault();
  var val = $(this).val();
  // 原生JS方式获取文本
  var name2 = this.options[this.selectedIndex].text;
  
  console.log("选中的值：", val);
  console.log("选中的文本：", name2);
});

额外注意事项 #

因为你的下拉选项是通过模板{% for i in team_list_pop %}动态生成的，要确保你的JavaScript代码是在DOM完全加载完成后执行的。可以把代码放在$(document).ready()里，或者把script标签放在页面底部（</body>标签之前），这样才能确保.pick-chart元素已经存在，事件绑定不会失效。

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