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

Question

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

列表如下所示：

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

在实际网页中，{$line1}显示为green，{$line2}显示为black and white。

我想放置一个JavaScript或jQuery代码来从and white中取出（删除）{$line2}文字，以便仅显示black。有什么建议？非常感谢您的回答。

Answer 1

这是一个动态解决方案：

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

演示：Fiddle

Answer 2

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

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

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

这样，黑色和白色将被设置为＆＃34; ＆＃34;或者什么都没有，然后到＆＃34;黑色＆＃34;如果您希望将其更改为另一段文字，请更改＆＃34; black＆＃34;别的什么。

Answer 3

请在 FIDDLE

上试试此演示

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

Answer 4

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

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

但是，假设您的文字是动态的，并且您希望始终切断第一个单词之后的任何内容（即'Black and white'→'Black'或'Red and yellow'→'Red'），然后你会想要使用这样的东西：

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

<强>解释

opt.text()获取option的文字。

split(' ')通过文本中的空格将字符串拆分为数组。

  

示例：字符串：'strings are awesome'将成为一个字符串数组：['strings', 'are', 'awesome']使用该分割。

[0]从该数组中获取第一个字符串。 （在你的情况下恰好是'Black'。）