如何使用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)');