是否有一种方法可以在下拉HTML选择列表时触发事件? 我不是在问when it closed,而是在您第一次放下它时。
当用户单击下拉菜单的向下箭头时,我想设置selectedIndex = -1。
大多数网站的下拉列表都以空白条目或“选择...”之类的虚拟条目开始。我只想拥有值本身,并在每次单击时清除列表。
这是我开始的目的,但是在他们做出选择后就会触发,这不是我想要的-当列表下降时,我只只。
<select id="ddlMylist">
<option value="10">Choice 1</option>
<option value="20">Choice 2</option>
<option value="30">Choice 3</option>
<option value="40">Choice 4</option>
</select>
document.getElementById("ddlMylist").onclick = function(){
//this clears the list when they click, but it fires when they
//are making an actual choice, which isn't what I want
document.getElementById("ddlMylist").selectedIndex=-1;
}
This JSFiddle尝试使用click事件,但当然不能让用户实际选择。
答案 0 :(得分:3)
这可以通过mousedown
事件来实现,该事件在用户首次启动对<select>
元素的点击时触发:
// mousedown is fired when mouse click is first pressed down on
// the <select> element
document
.getElementById("ddlMylist")
.addEventListener("mousedown", function(){
// Resets selected option item
document.getElementById("ddlMylist").selectedIndex = -1;
})
<select id="ddlMylist">
<option value="10">Choice 1</option>
<option value="20">Choice 2</option>
<option value="30">Choice 3</option>
<option value="40">Choice 4</option>
</select>
请记住,此方法已经过测试并且可以在Chrome but is not guaranteed to work in other browsers中使用。
答案 1 :(得分:1)
不是很了解您的问题,但是这三个事件将在与选择标签交互的不同阶段清除选择标签。
document.getElementById("ddlMylist").addEventListener('focus', function(){
document.getElementById("ddlMylist").selectedIndex=-1;
});
document.getElementById("ddlMylist").addEventListener('blur', function(){
document.getElementById("ddlMylist").selectedIndex=-1;
});
document.getElementById("ddlMylist").addEventListener('change', function(){
document.getElementById("ddlMylist").selectedIndex=-1;
});
答案 2 :(得分:0)
我修改了@Dacre Denny的答案,并使其可以在Firefox,Chrome和Edge中使用。
var ClearOnClick = function(){
document.getElementById("ddlMylist").selectedIndex = -1;
StopListening();
};
function StopListening(){
console.log("not listening...");
document.getElementById("ddlMylist").removeEventListener("mousedown", ClearOnClick);
document.getElementById("ddlMylist").addEventListener("change", StartListening);
}
function StartListening(){
console.log("listening...");
document.getElementById("ddlMylist").addEventListener("mousedown", ClearOnClick);
}
StartListening();
并且,如果您希望将此行为应用于页面上的所有选择列表,则可以使用此(JSFiddle)。如果任何人都可以看到一种无需调用eval()的好方法,那么我无所不能。
$("select").each(function () {
/*
every drop down list gets three functions - startlistening, clearonclick, and stoplistening.
clearonclick is stored in a variable so that it can be unhooked
Once everything is wired up, it should look like this -but repeated once for each drop down
var ClearOnClick = function(){
document.getElementById("ddlMylist").selectedIndex = -1;
StopListening();
};
function StopListening(){
document.getElementById("ddlMylist").removeEventListener("mousedown", ClearOnClick);
document.getElementById("ddlMylist").addEventListener("change", StartListening);
}
function StartListening(){
document.getElementById("ddlMylist").addEventListener("mousedown", ClearOnClick);
}
StartListening();
*/
var controlName = this.id;
//function names
var cc_vname = "ClearOnClick_" + controlName;
var sp_fname = "StopListening_" + controlName;
var sl_fname = "StartListening_" + controlName;
//full function bodies
var clearOnClick_functionDeclaration = "var " + cc_vname + " = function(){document.getElementById('" + controlName + "').selectedIndex = -1;" + sp_fname + "();}";
var stopListening_functionBody = "function " + sp_fname + "(){ document.getElementById('" + controlName + "').removeEventListener('mousedown', " + cc_vname + ");document.getElementById('" + controlName + "').addEventListener('change', " + sl_fname + ")}";
var startListening_functionBody = "function " + sl_fname + "(){document.getElementById('" + controlName + "').addEventListener('mousedown', " + cc_vname + ");}";
console.log(clearOnClick_functionDeclaration);
console.log(stopListening_functionBody);
console.log(startListening_functionBody);
//create the functions for this drop down
eval(clearOnClick_functionDeclaration);
eval(stopListening_functionBody);
eval(startListening_functionBody);
//kick off by calling the start listening function
console.log(sl_fname + "();");
eval(sl_fname + "();");
});