Javascript 是否可以在下拉列表中更改所选项目的文本？

我有一个下拉列表，其中显示的项目如下：

1个苹果
2香蕉
3芒果
4橙色

现在，当我选择任何选项时，我只希望显示数字，而不是整个项目文本。i、 e当我选择“1苹果”时，我只想显示“1”。我如何做到这一点

我试着用

 $("#ddlFruits option:selected").text($("#ddlFruits option:selected").text().split(' ')[0])

---

但这也会更改下拉列表中的项目。

select

-元素具有一个

selectedIndex

-属性，您可以在

change

-事件中使用该属性来获取所选选项并操纵其值或内部HTML。

如果您只想在选择选项时显示数字，但在进行更改时保留数字和文本，使用更改和鼠标向下组合事件

$（'select'）。更改（函数（）{
option=$（this.val（）.split（“”）
$（'option:selected'，this）.data（'orig'，$（this.val（））.html（选项[0]）
}).mousedown（函数（）{
$（'select option'）。每个（函数（）{
$（this.html（$（this.data（'orig'））
})
})

一个苹果
2香蕉
3芒果
4橙色

首先，您需要知道select的值已更改，在这种情况下，您将获得所选选项的信息

然后必须发生两件事：首先，您需要确保所有选项都返回到其原始状态（显示完整标签），这是因为您要修改这些标签。其次，您只需选择其值的第一部分即可继续更新所选选项的标签（我选择值只是为了方便，但它很可能是选项的文本或外部源）

请注意，为了正确分割选项的值，我必须将空格作为参数传递给分割函数。

$（函数（）{
$（“#ddl”）.on（'change'，function（）{
var$selected=$（'option:selected'，this）；
$notSelected=$（'option:not（：selected'），此选项）；
$notSelected.每个（功能（i，选项）{
$（选项）.text（$（选项）.val（））；
});
$selected.text（$selected.val（）.split（“”）[0]）；
})  
});

一个苹果
2香蕉
3芒果
如果更改所选选项，是否希望返回文本？或者，您是否希望这样，一旦您做出选择，文本将永远消失，只剩下数字？我希望文本在再次尝试更改所选选项时返回。仅供参考，如果您选择同一选项两次，此选项将被破坏