添加并选择一个“;假的“<选项>值设置为a<选择>

Add and select a "fake" <option> value to a <select>

本文关键字：lt 选择 gt 选项 设置 添加 一个 假的      更新时间：2023-09-26

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

例如：我有一个显示10种水果的页面。每种水果都有它的重量。使用select，我可以按重量过滤水果：

<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"选项（这就是我在标题中写"假的"选项的原因）。

简而言之，我只想编辑所选显示的选择文本，而不是他的选项。。。类似于，使用JS

var select = document.getElementById("fruit-select");
select.value = "1-2kg";

显然这不起作用，因为选项"1-2kg"不存在。。

这可能吗？我希望我已经足够清楚了。。提前感谢任何帮助，向致以最良好的问候

解决方案（不适用于Safari…）

多亏了Ricardo，我找到了这个解决方案：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等（如果范围是固定的）。每次从可见下拉列表中选择某个内容时，都会将隐藏下拉列表中的选定项目更改为所需范围。

听起来您想要包含一系列权重。您可能需要考虑不同类型的输入，例如范围滑块。下面是jQueryUI项目中的一个示例。我并不是建议您使用jQueryUI本身，只是向您展示了实现它的一种方法。

您可以使用<select multiple>，每当有人选择多个选项时，您就会得到最大值和最小值，并显示该间隔。

试试这个：

http://jsfiddle.net/4suwY/4/

我看到的唯一问题是在选择点击这个功能时丢失值：

$("#asd").mousedown(function () {
    $("#asd option[value='1-2kg']").remove().change();                      
});
相关文章：