如何使用jQuery將文本附加到選擇選項文本的末尾？

Question

比方說，我有以下HTML：

<select id="dept"> 
<option value="1" selected>General</option> 
<option value="2">Payment Problems</option> 
</select> 

在這種情況下我想改變General到General (current)。選項文本也是動態的。我只想在選項文本的末尾附加(current)。

我該怎麼做？

在此先感謝

Answer 1

這裏有一種方法

$("#dept option[value='1']").append(' (current)');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="dept"> 
 
    <option value="1" selected>General</option> 
 
    <option value="2">Payment Problems</option> 
 
</select>

Answer 2

這個怎麼樣？

var current_text = $("#dept :selected").text(); 
 
$("#dept :selected").text(current_text + " (current)");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<select id="dept"> 
 
<option value="1" selected>General</option> 
 
<option value="2">Payment Problems</option> 
 
</select>

Answer 3

$('select').change(function(){ 
 
var valu = $(this).val(); 
 
var text = $(this).find('option:selected').text(); 
 
text += ' (current)'; 
 
$(this).find("option:contains('current')").each(function(){ 
 
var txt = $(this).text().replace('(current)','') 
 
$(this).text(txt); 
 
}); 
 
$(this).find('option:selected').text(text); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="dept"> 
 
<option value="1" selected>General</option> 
 
<option value="2">Payment Problems</option> 
 
</select>

Answer 4

這是一個輕微的改善由@LGSon原來的答案。該版本可確保「當前」總是附加到當前選定的選項（我認爲「值」屬性保持不變時，選擇更改）：

$('#dept option[selected=""]').append(' (Current)');