Javascript 如何删除下拉列表中的部分文本？

我正在开发一个smarty模板，我可以编辑HTML并只放置JavaScript，但不能编辑php代码

列表如下所示：

<select>
  <option id="1" value="first">{$line1}</option>
  <option id="2" value="second">{$line2}</option>
</select>

{$line1}
{$line2}

其中，在live页面中，

{$line1}

显示为

绿色

，

{$line2}

显示为

黑白

---

我想放置一个JavaScript或jQuery代码，从

{$line2}

中取出（删除）

和白色的
文本，以便只显示
黑色的
。有什么建议吗？非常感谢您的回答。
这里有一个动态解决方案：

$('select option').each(function(i, item){
        var words = $(item).text().split(' ');
        $(item).text(words[0]);
    });

演示：
这里是一个动态解决方案：

$('select option').each(function(i, item){
        var words = $(item).text().split(' ');
        $(item).text(words[0]);
    });

演示：
要从下拉列表中删除选项，只需使用JavaScript执行如下操作：

document.getElementById("2").innerHTML = "";

document.getElementById("2").innerHTML = "black";

这样，黑白将设置为“”或完全不设置，然后设置为“黑色”，如果您想将其更改为另一段文本，请将“黑色”更改为其他内容。
要从下拉列表中删除选项，只需使用JavaScript执行以下操作：

document.getElementById("2").innerHTML = "";

document.getElementById("2").innerHTML = "black";

通过这种方式，黑白将设置为“”或完全不设置，然后设置为“黑色”。如果您想将其更改为另一段文本，请将“黑色”更改为其他文本。
请尝试此功能，演示位于

if ($('select option#2').text().indexOf('and white') > 0){
  $('select option#2').text('black');
}

请在

if ($('select option#2').text().indexOf('and white') > 0){
  $('select option#2').text('black');
}

如注释中所述，您可以使用以下代码设置选项的值：

$('option[value=second]').text('Black')

但是，假设您的文本是动态的，您希望始终删除第一个单词以外的任何内容（即
“黑白”
→ <代码>“黑色”
或
“红色和黄色”
→ <代码>'Red'
），然后您将希望使用类似以下内容：

var opt = $('option[value=second]');
opt.text(opt.text().split(' ')[0]);

说明：

<select>
  <option id="1" value="first">{$line1}</option>
  <option id="2" value="second">{$line2}</option>
</select>

opt.text（）
获取
选项的文本

split（“”）
按文本中的空格将字符串拆分为数组

示例：字符串：
'strings is awesome'
将成为字符串数组：
['strings'，'are'，'awesome']
使用该拆分

[0]
从该数组中获取第一个字符串。（在您的情况下，它恰好是“黑色”
）
如注释中所述，您可以使用以下代码设置选项的值：

$('option[value=second]').text('Black')

但是，假设您的文本是动态的，您希望始终删除第一个单词以外的任何内容（即
“黑白”
→ <代码>“黑色”
或
“红色和黄色”
→ <代码>'Red'

），然后您将希望使用类似以下内容：

var opt = $('option[value=second]');
opt.text(opt.text().split(' ')[0]);

说明：

<select>
  <option id="1" value="first">{$line1}</option>
  <option id="2" value="second">{$line2}</option>
</select>

opt.text（）

获取

选项的文本

split（“”）
按文本中的空格将字符串拆分为数组

示例：字符串：
'strings is awesome'
将成为字符串数组：
['strings'，'are'，'awesome']
使用该拆分

[0]
从该数组中获取第一个字符串。（在您的例子中，它恰好是
'Black'
）
$（“选项[value=second]”）。模板中的文本（“Black”）
变量和javascript中的硬编码值可能不是一个好主意。
$（“选项[value=second]”）。文本（“Black”）
模板中的变量和javascript中的硬编码值可能不是一个好主意。首先将其设置为空字符串有什么好处？我喜欢这个简单、优秀的纯JS解决方案。但为什么要先将其设置为
”
，然后再将其设置为
“黑色”
？哦，哈哈：P刚刚意识到正在做document.getElementById（“2”）.innerHTML=“”；没用。我只是想确保它被重置，因为万一它变成黑白。首先将它设置为空字符串的好处是什么？我喜欢这个简单的、伟大的纯JS解决方案。但为什么要先将其设置为
”
，然后再将其设置为
“黑色”
？哦，哈哈：P刚刚意识到正在做document.getElementById（“2”）.innerHTML=“”；没用。我只是确定它被重置了，因为万一它变黑变白了。不。看看当我将选项中的文本更改为“黑色和棕色”时会发生什么。选项文本仍然更改为“黑色”，即使它没有包含“和白色”。因为他正在为选项文本使用变量（
{$line1}
），所以在javascriptNope中硬编码值可能不是一个好主意。看看当我将选项中的文本更改为“黑色和棕色”时会发生什么。选项文本仍然更改为“黑色”，即使它没有包含“和白色”。因为他正在使用变量（
{$line1}
）作为选项文本，用JavaScription硬编码值可能不是一个好主意谢谢您的解释！它帮了很多忙，但不幸的是，它对我和其他任何答案都不起作用。我这样放置代码
{literal}var opt=$（'option[value=second]'）；opt.text（opt.text（）.split（“”）[0]）；{/literal}
但是什么都没有改变！我认为我需要在代码中添加一些内容来覆盖或比原始代码具有最高优先级。就像
！CSS中的重要信息
。再次感谢您的时间：）谢谢您的解释！它帮了很多忙，但不幸的是，它对我和其他任何答案都不起作用。我这样放置代码
{literal}var opt=$（'option[value=second]'）；opt.text（opt.text（）.split（“”）[0]）；{/literal}
但是什么都没有改变！我认为我需要在代码中添加一些内容来覆盖或比原始代码具有最高优先级。就像
！CSS中的重要信息
。再次感谢您抽出时间：）