Question

通过鼠标单击选择HTML <select> <option>。通过CTRL +单击或鼠标单击+拖动可以进行多项选择。可以通过CTRL +单击取消选择。

我想通过再次点击它来取消选择之前选择的选项。任何点击都会切换选择。

var option = document.createElement('option');
option.onclick = function() {
        if(this.selected) {
            this.selected=false;
        };
    };

https://jsfiddle.net/L0L3378q/1/

不幸的是，似乎onclick在浏览器（我的情况下是Firefox）处理点击本身后进行了评估，这导致“选择”后立即“取消选择”我的onclick函数。

现在似乎所有浏览器每次都“选择”点击选项，如果它从未获得实际选择的状态，这将使该函数无效。

有没有办法确保首先评估onclick，抑制浏览器的点击，或者可以独立跟踪选定的状态（custom property）？

Answer 1

使用自定义属性的方法似乎有效： https://jsfiddle.net/L0L3378q/3/

HTML：

<select id="sel" size="3" multiple="multiple">
  <option>First!</option>
</select>

JavaScript的：

var option = document.createElement('option');
option.myselected = false;
option.onclick = function() {
  if (this.myselected) {
    this.selected = false;
    this.myselected = false;
  }
  else {
    this.myselected = true;
  };
};
option.innerHTML = "hey, hoh, gelato!";

var select = document.getElementById("sel");
select.appendChild(option);

Answer 2

根据您的要求试试这个

var option = document.createElement('option');
option.onmousedown = function() {
  if (this.selected) {
    this.selected = false;
    return false;
  }
  else
  {
  this.selected = true;
    return true;
  }
};
option.innerHTML = "hey, hoh, gelato!";
var select = document.getElementById("sel");
select.appendChild(option);

希望它对你有用

Answer 3

好的，特别是在Windows 7上，它不适用于Chrome，Firefox，Opera，Internet Explorer。在Android上，它甚至看起来都不像下拉菜单，但这只是一个jsfiddle问题，与代码无关。我将在本周晚些时候尝试Windows 10。

单击时取消选择以前选择的选项

3 个答案: