如何從 select 菜單中選擇 select 文本選項

Question

我正在嘗試 select 顯示在我的 select 菜單中的文本。 在更改時，我想知道什么文本是 select 而不是值。

我可以使用this.value為值執行此操作，但是當嘗試執行this.label或this.text時，我得到了未定義的返回。

如何獲取下拉菜單中顯示的文本而不是值？

如果我這樣做this.title那么它顯示我的 select 菜單的標題而不是選項的實際標題

這是我的代碼示例：

 $("#test").change(function() { let selectValue = this.value console.log(selectValue) let title = this.title console.log((this.options[this.selectedIndex])) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="test" title="test"> <option value="high school">Academic</option> <option value="online">Retail</option> </select>

我希望看到返回值“學術”而不是“高中”或“零售”而不是“在線”

Answer 1

通過this.options和this.selectedIndex獲取選中的選項

console.log(this.options[this.selectedIndex])

 $("#test").change(function() { let selectedOption = this.options[this.selectedIndex]; console.log(selectedOption.innerHTML); console.log($(selectedOption).text()); console.log($(selectedOption).html()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="test" title="test"> <option value="high school">Academic</option> <option value="online">Retail</option> </select>