替换选择表单的文本答案

【问题标题】：Replace text of select form替换选择表单的文本
【发布时间】：2023-03-24 01:20:02
【问题描述】：

我有一个带有以下select的表格

<div class="styled-select styled-input">
   <select name="upcp-sort-by" id="upcp-sort-by" onchange="UPCP_Sort_By();">
       <option value="price_asc">Price (Ascending)</option>
       <option value="price_desc">Price (Descending)</option>
   </select>
</div>

我想用 jquery/JavaScript 将选择的文本替换为另一个文本。我从这个question 试过这个：

 $(".styled-select").text(function () {
     return $(this).text().replace("Price (Ascending)", "Vol (Ascending)"); 
 });

但它破坏了选择选项..

$(".styled-select").text(function() {
  return $(this).text().replace("Price (Ascending)", "Vol (Ascending)");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="styled-select styled-input">
  <select name="upcp-sort-by" id="upcp-sort-by" onchange="UPCP_Sort_By();">
       <option value="price_asc">Price (Ascending)</option>
       <option value="price_desc">Price (Descending)</option>
   </select>
</div>

我怎样才能正确地只替换选择的文本？

【问题讨论】：

jQuery if div contains this text, replace that part of the text的可能重复
如果您看到我的问题，我正在使用您建议的问题的答案，但它对我不起作用！
不同之处在于您尝试更改文本的元素是$(".styled-select")，即<div> 包围<select>。您需要更改的不是 div，甚至不是 select，而是 select 中的一个选项。
@PeterB 感谢您的信息！您注意到我发布的解决方案有什么问题！

标签： javascript jquery

【解决方案1】：

有两个错误

您需要更改option 的文本，而不是select 元素。
您需要将替换后的值设置回option元素。

即

$(".styled-select option").each(function() {
  $(this).text( $(this).text().replace("Price (Ascending)", "Vol (Ascending)") );
});

演示

$(".styled-select option").each(function() {
  $(this).text( $(this).text().replace("Price (Ascending)", "Vol (Ascending)") );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="styled-select styled-input">
  <select name="upcp-sort-by" id="upcp-sort-by" onchange="UPCP_Sort_By();">
       <option value=""></option><option value="price_asc">Price (Ascending)</option>
       <option value="price_desc">Price (Descending)</option>
   </select>
</div>

或使用contains 缩小options 的范围进行迭代

$(".styled-select option:contains(Price (Ascending))").each(function() {
  $(this).text( $(this).text().replace("Price (Ascending)", "Vol (Ascending)") );
});

【讨论】：

很好的答案，但是我认为没有return也可以吗？
@Ele 你的意思是只迭代那些需要替换文本的选项？
@PeterB 你是对的，return 没有添加任何内容。
现在完美了！

【解决方案2】：

您可以编写一个干净的代码，首先选择带有您要替换的文本的option 元素，然后替换该option 的text 内容：

//get the desired option
var option = $(".styled-select option:contains(Price (Ascending))");
//replace the text
var replacedText = option.text().replace("Price (Ascending)", "Vol (Ascending)");
//set the replaced text
option.text(replacedText);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="styled-select styled-input">
   <select name="upcp-sort-by" id="upcp-sort-by" onchange="UPCP_Sort_By();">
       <option value="price_asc">Price (Ascending)</option>
       <option value="price_desc">Price (Descending)</option>
   </select>
</div>

【讨论】：