javascript - 添加并选择 "fake"<option> 值到 <select>

Question

我需要添加一个“假”<option>到 <select> ，它将显示为选定的一项，但如果用户想要更改项目，则无法在下拉菜单中选择该项目。

例如:我有一个页面显示 10 个水果。每个水果都有他的重量。使用选择，我可以按重量过滤水果:

<select id="fruits">
   <option>1 kg</option>
   <option>2 kg</option>
   <option>3 kg</option>
</select>

如果我选择第二个选项(2kg)，页面将删除所有重量 != 2kg 的水果，并且显然只显示重量 == 2kg 的水果。

现在我需要添加一个“重量范围”，例如“显示重量在 1 到 2 公斤之间的水果”。我不想向 中添加新选项，我只想过滤显示重量在选定范围(1 和 2kg)之间的水果的表格，并将该范围显示为选择中的选定值。所以我的 CLOSED 下拉菜单将具有值=“1-2kg”，但是如果我单击选择，我将找不到“1-2kg”选项(这就是为什么我在标题中写了“fake”选项)。

简而言之，我只想编辑所选显示的选择文本，而不是他的选项...类似于，使用 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";

“我是被选中的人”选项显示为已选中，但不可单击(甚至在选项列表中不可见)

谢谢大家!

Answer 1

我认为你在这里需要做的实际上是有一个包含所有这些值的可见选择，1kg，2kg等，然后你有一个隐藏的选择，它将包含这些范围，例如1-2kg等(如果范围是固定的)。每次您从可见下拉列表中选择某些内容时，都会将隐藏下拉列表中的所选项目更改为所需的范围。