如果属性在DOM中，则选择选定选项

Question

To create a Dual Listbox like Bootstraps我需要删除selected选项的默认灰色。删除此灰色的唯一方法是将元素的选定状态更改为false。没有其他技巧可以去除所选选项的灰色背景颜色。

现在，如果我这样做，属性selected仍然保留在DOM中，但似乎是错误的。我想如果我们有一个像：

这样的元素

<option value="1" selected>1: Lorem ipsum</option>

如果selected存在，则表示始终选项为true，因为它与：

相同

<option value="1" selected="selected">1: Lorem ipsum</option>

或

<option value="1" selected="true">1: Lorem ipsum</option>

但这似乎并非如此。谁能为我解释一下这个问题？

我创建了一个试图演示场景的小提琴https://jsfiddle.net/npm6tn0m/。哪里有css

option[selected] {
   background-color: orange;
}

仅适用于selected选项，该选项设置为false但在DOM中仍具有selected属性。因为这可能因不同的浏览器而异，这是我在OSX Chrome浏览器中看到的图像：

所有类似小提琴的代码也在SO：

var elements = document.querySelectorAll('.special option');
for(var i=0; i < elements.length; i++) {
    elements[i].selected = false;
}

setTimeout(function(){
  var elements = document.querySelectorAll('option');
	for(var i=0; i < elements.length; i++) {
     console.log('Value = ' + elements[i].value + ' selected: '+ elements[i].selected);
	}
}, 1000);

option[selected] {
   background-color: orange;
}

<select class="special" multiple>
  <option value="1" selected>1: Lorem ipsum</option>
  <option value="2"  >2: dolor sit amet</option>
</select>

<select multiple>
  <option value="3"  selected>3: Lorem ipsum</option>
  <option value="4"  >4: dolor sit amet</option>
</select>

Answer 1

  

我想如果我们有一个像：

这样的元素

<option value="1" selected>1: Lorem ipsum</option>

     

如果选中，则表示总是将选项设为true，因为它与：

相同

<option value="1" selected="selected">1: Lorem ipsum</option>

     

...

     

但这似乎并非如此。有谁可以为我解释这个问题？

你对boolean attributes的工作方式是正确的，而不是selected布尔属性所代表的含义。 ： - ）

selected attribute代表默认选定状态，而非当前选定状态。这就像input的{​​{1}}属性一样;默认值（例如，在表单重置时使用），而不是当前值。

正如value的当前值未在DOM中表示一样，input的选择性的当前值也未在DOM中表示。

Answer 2

不同的浏览器可能会以不同方式处理此属性根据MSDN文档（适用于Internet Explorer）：

  

要选择HTML中的项目，不是   必须设置的值   SELECTED属性为true。仅仅   存在SELECTED属性集   它的价值是真的。

在Firefox和Safari中，这确实有效：

<option selected='false' />

通过查看HTML5的官方WC3标准我可以看出，支持的案例只是：

<option selected='selected' />

您需要有选择地发出属性，或者使用selected='false'或使用javascript来控制最初选择的项目。