Question

是否有一种方法可以在下拉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事件，但当然不能让用户实际选择。

Answer 1

这可以通过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中使用。

Answer 2

不是很了解您的问题，但是这三个事件将在与选择标签交互的不同阶段清除选择标签。

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;
  });

Answer 3

我修改了@Dacre Denny的答案，并使其可以在Firefox，Chrome和Edge中使用。

Link to JSFiddle。

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 + "();");
  });

JavaScript在下拉列表时清除选择列表

3 个答案: