up
down
Close
架站盒子
Web Development Box
 

jQuery select 自動監聽獲取切換 option 的值

│ 3900 Views │ jQuery
jQuery select 自動監聽獲取切換 option 的值
jQuery select 自動監聽獲取切換 option 的值

有時候需要製作一個select選擇器,並且自動監聽獲取使用者切換的option的文字或value值,這時候要怎麼透過jQuery來實現這個功能呢?

自動監聽

要達到自動監聽select是否切換(改變)主要是使用onChange來實現。

$("#selector").on("change", function() { … });

接著在function中加上option:selected來獲取被選中的值。後面的each是遍歷selector

$("#selector option:selected").each(function () { });

再於此function中放入希望執行的動作,假設我們希望將監聽的內容自動顯示在span中,則加上以下這一句。

$("span").html($(this).html());

$(".span").html()表示在span上顯示監聽的文字(html),而$(this).html()就是指當前被選中的option。如果希望顯示的是value則如下。

$("span").html($(this).val());

完整範例

即時顯示文字:
即時顯示V值:

程式碼(HTML+jQuery)

See the Pen Untitled by kumo (@kumo-tw) on CodePen.

延伸閱讀

本文是否對您有幫助?