如何用jQuery捕捉<select >的變化事件？

Question

<select id="target"> 
<option value="1">item1</option> 
<option value="2">item2</option> 
<option value="3">item3</option> 
</select> 

說，我想根據選定的值做一些處理。

Answer 1

$('#target').change(function() { 
    $(this).find(":selected").each(function() { 
      console.log($(this).val()); 
    }); 
}); 

Answer 2

$("#target").change(function() { 
    var selectedOption = $("#target option:selected"); 
    var selectedValue = selectedOption.val(); // gets the selected value 
    var selectedText = selectedOption.text(); // gets the selected text 
}); 

Answer 3

$("#target").change(function() { 
    alert($("#target option:selected").val()); 
}); 

您可能還需要考慮這個問題，以及如果這個人不改變的選項，但只需單擊下拉，選擇相同的項目：

$("#target option").click(function() { 
    alert($("#target option:selected").val()); 
}); 

Answer 4

您可以通過以下方式獲得所選值和文本：

$("#target").change(function() { 
    var selectedValue = $(this).val(), 
     selectedText = $('option:selected', this).text(); 
    // ... 
}); 

Answer 5

接受的答案是好的，但不要捕捉按鍵（箭頭鍵或字母鍵）所做的更改。

這是一個更好的apporach：

$('#target').bind("change keyup",function() { 
    $(this).find(":selected").each(function() { 
    // do something amazing here 
    }); 
}); 

Answer 6

使用箭頭功能，它可以是：

$('#target').change((e) =>{ 
     console.log(e.currentTarget.value); 
     console.log(e.currentTarget.textContent); 
}); 

通過event.currentTarget更換this。