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

时间:2018-12-26 20:57:00

标签: javascript

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

3 个答案:

答案 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中使用。

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