我需要添加一个“假”<option>到 <select> , 这将显示为已选择的项目，但如果用户想要更改项目，则不能在下拉菜单中选择。
例如:我有一个显示 10 个水果的页面。每个水果都有他的重量。使用 select，我可以按重量过滤水果:
<select id="fruits">
<option>1 kg</option>
<option>2 kg</option>
<option>3 kg</option>
</select>
如果我选择第二个选项 (2kg)，页面将删除所有重量为 != 2kg 的水果，并且显然只显示重量为 == 2kg 的水果。
现在我需要添加一个“重量范围”，例如“显示重量在 1 到 2 公斤之间的水果”。我不想向 中添加新选项，我只是想过滤显示重量介于所选范围(1 和 2 公斤)之间的水果的表格，并将此范围显示为选择中的所选值。所以我的 CLOSED 下拉菜单的值为“1-2kg”，但如果我点击选择，我将找不到“1-2kg”选项(这就是我在标题中写“假”选项的原因)。
简而言之，我只想编辑选中显示的选择文本，而不是他的选项...类似，使用 JS
var select = document.getElementById("fruit-select");
select.value = "1-2kg";
显然这不起作用，因为选项“1-2kg”不存在..
这可能吗？我希望我已经足够清楚了..在此先感谢您的帮助，最诚挚的问候
解决方案(不适用于 Safari...)
感谢里卡多，我找到了这个解决方案:http://jsfiddle.net/4suwY/5/
HTML:
<select id="asd">
<option>hello</option>
<option>I'M THE CHOSEN ONE</option>
<option>asd</option>
<option>wer</option>
<option>qwe</option>
</select>
JS:
var sel = document.getElementById("asd");
var optnz = sel.getElementsByTagName("option")[1];
sel.value = optnz.value;
optnz.style.display = "none";
“I'M THE CHOSEN ONE”选项显示为选中状态，但不可点击(甚至在选项列表中不可见)
谢谢大家!
我认为您在这里需要做的是，实际上有一个包含所有这些值的可见选择，1kg、2kg 等，然后您有一个隐藏的选择，它将包含这些范围，例如 1-2kg 等(如果范围是固定的)。每次您从可见下拉列表中选择某些内容时，您都会将隐藏下拉列表中的所选项目更改为所需的范围。