使用 jQuery 更改选项的文本

Posted 2023-03-11

【中文标题】使用 jQuery 更改选项的文本

【英文标题】：Change the Text of a Option with jQuery

【发布时间】：2012-03-16 13:48:00

【问题描述】：

如何？

我想在一个选项中将 Newest 更改为 Oldest 是 <select> 元素。

$('select option:contains("Newest")').changeText('Oldest');

.replaceWith 不适合我。

谢谢。

----更新----

如果我的脚本如下所示：

$('select option:contains("Newest")').text('Oldest');
$('select option:contains("Oldest")').text('Newest');

然后我取消了第一个脚本，但是，这不是我想要的。我有两种选择，一种是“最新”，我想用“最旧”替换，另一种是“最旧”，我想用“最新”替换。我怎样才能做到这一点？

【问题讨论】：

text() 不适合你吗？

你的语法有问题。你在哪里找到.changeText 方法？

@amnotiam 这是一个占位符来显示我想要完成的事情

使用@XavierHolt 指出的方法，但是通过删除内部单引号、将它们更改为双引号或转义它们来修复您的语法。

@amnotiam 是的，我已经处理好了...

【参考方案1】：

你可以通过一个简单的脚本来做到这一点

$("option[value=optionvalue]").html('New text');

【参考方案2】：

更改所选选项的文本：

$("#select").find("option:selected").text('Newest');

【参考方案3】：

$('select option:contains("Newest")').each(function()
   var $this = $(this);

   $this.text($this.text().replace("Newest","Oldest"));    
);​

http://jsfiddle.net/eSa5p/

编辑：回答新问题：

var $newest = $('select option:contains("Newest")');

$('select option:contains("Oldest")').text('Newest');
$newest.text('Oldest');

http://jsfiddle.net/eSa5p/3/

【讨论】：

不幸的是，这对我不起作用，虽然它本来是首选

【参考方案4】：

$("#mySelect option").html(function(i,str)
  return str.replace(/Newest|Oldest/g,  // here give words to replace
     function(m,n)
         return (m == "Newest")?"Oldest":"Newest";  // here give replacement words
     );
);

演示：http://jsfiddle.net/diode/eSa5p/2/

【参考方案5】：

$('select option:contains("Newest")').addClass('changeToOldest');
$('select option:contains("Oldest")').addClass('changeToNewest');
$('.changeToOldest').text('Oldest').removeClass('changeToOldest');
$('.changeToNewest').text('Newest').removeClass('changeToNewest');

【讨论】：

您查询 DOM 4 次，而只需要两次。创建 jquery 对象后，它会维护在创建时匹配的元素列表。只需在修改之前将 jquery 对象保存到变量中。无需额外查询 2 次，无需添加和删除类。

【参考方案6】：

您应该提出一个新问题，但答案如下：

$('select option:contains("Newest")').text('TEMPEST');
$('select option:contains("Oldest")').text('Newest');
$('select option:contains("TEMPEST")').text('Oldest');

【讨论】：

这是一个不需要的 dom 的第三个查询。创建 jquery 对象后，它会维护在创建时匹配的元素列表。只需在修改之前将 jquery 对象保存到变量中。无需额外查询。