点击取消选择之前选择的选项
问题描述:
HTML <select>
<option>
s通过鼠标单击来选择。 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)?
答
具有自定义属性的方法似乎工作: 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);
+0
来选择/取消选择。对于多选(有时自定义状态变得“混淆”)不能很好地工作。 – handle
答
按您的要求试试这个
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);
希望它对你有用
你的jsfiddle/bin链接在哪里? mousedown来之前点击,但你的问题太模糊,没有小提琴 – caub
好点:https://jsfiddle.net/L0L3378q/1/ – handle
尝试添加链接在你的问题,顺便说一句,它适用于Chrome浏览器https:// jsfiddle.net/crl/L0L3378q/2/ without js – caub