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());

即時顯示文字：
即時顯示Ｖ值：

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