找到一個下拉列表中選擇的選項中有許多相同的類

Question

的HTML是

<select class='pay-type' style='width:100%'> 
    <option>Credit Card</option> 
    <option>Cash</option> 
    <option>Credit Note</option> 
    option>Gift Voucher</option> 
    <option>Cheque</option> 
</select> 

我重現此選擇通過將相同的HTML到新的div的。我有一個模塊寫在觸發下拉選擇更改時。我如何獲得onclick函數中確切下拉列表的選定值？下面的代碼似乎不起作用。

$('.pay-type').change(function(){ 
    console.log($(this).filter('option :selected')); 
}); 

Answer 1

你缺少一個.text()

$('.pay-type').change(function(){ 
    console.log($(this).filter('option :selected').text()); // to show the text 
    console.log($(this).val()); // to show the value 
}); 

注：在你的代碼有一些東西了。

1. 該選項沒有值。雖然不是絕對必要的，但擁有它們是很好的做法。如果要將值存儲在數據庫中，則現在必須僅使用text方法進行存儲。
2. 如果你把你的第一個option作爲選擇付款方式，用戶還可以選擇信用卡選項中選擇div來顯示。現在做同樣的事情，用戶將不得不先選擇其他東西，然後返回並選擇該選項以查看它