原型 - 如何从下拉列表中取消选择已选定的值

Question

如何使用Prototype取消下拉列表中所选的值。

来源

<select id=“mylist” MULTIPLE >
<option value=“val-1”>Value 1</option>
<option value=“val-2” SELECTED>Value 2</option>
<option value=“val-3”>Value 3</option>
</select>

To

<select id=“mylist” MULTIPLE >
<option value=“val-1”>Value 1</option>
<option value=“val-2”>Value 2</option>
<option value=“val-3”>Value 3</option>
</select>

非常感谢您提前的任何帮助。

- woot586

---

通常都会有一个默认选项（通常为空，有时为“请选择”或类似的内容），这是因为必须选择某些东西。 - josh.trow

你的问题描述了更改“selected” DOM属性，但是你的代码示例要求更改“selected” HTML布尔属性。为什么会有这种差异？ - user1385191

我手头有两个下拉框。如果用户从其中一个选择，我需要取消另一个的选择。 - woot586

这也是一个多选列表，我忘了提到。 - woot586

Answer 1

我不确定如何在Prototype中实现，但我可以在JavaScript中实现。

对于常规选择框，请设置yourSelectElement.selectedIndex = -1。

对于多选选择框，您可以仅Ctrl+单击所选项目，但也可以通过编程方式实现。请参见链接。

http://jsfiddle.net/kaleb/WxJ9R/

- kzh

---

jQuery也不能做到这一点——至少在我有限的尝试中是如此。无论是$("#mySelect").val(null)还是$("#mySelect").prop("selected",null)，都会将高亮显示关闭，但实际上并未从单选下拉菜单中删除已选项属性。我的验证认为mySelect已经选择了某个选项并允许提交，即使似乎没有选择任何东西。 - gordon

Answer 2

您需要添加一个空选项：

您不能不添加空选项

<option></option> 

然后。

$$("#mylist option[selected]")[0].selected = false;
$$("#mylist option")[0].selected = true;

- remi bourgarel

Answer 3

当第二个列表被选中时...

Event.observe('secondlist', 'change', function(){
  if (this.selectedIndex >= 0) 
    $$('#mylist option[selected]').invoke('writeAttribute', 'selected', false);
});

- clockworkgeek

Answer 4

我发现以下代码运行良好：

var options = $$('select#mylist option');
var len = options.length;
for (var i = 0; i < len; i++) {
  options[i].selected = false;
}

- woot586

---

这正是我代码片中的内容。 - kzh