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

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

“我是THE CHOSEN ONE”选项显示为已选中，但无法点击（甚至在选项列表中均未显示）

谢谢你们！

Answer 1

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

Answer 2

听起来你想要包含一系列重量。您可能需要考虑不同类型的输入，例如范围滑块。来自jQuery UI项目的Here's an example。我不是建议您使用jQuery UI本身，只是向您展示一种可以实现的方式。

Answer 3

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

Answer 4

试试这个：

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

我看到的唯一问题是在选择单击此功能时失去了值：

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

添加并选择“假”<option>值到<select> </select> </option>

解决方案（不在Safari上工作......）

4 个答案: