Question

当选择框下拉列表显示/可见时，是否有任何jQuery事件被捕获？我试图在显示下拉列表时使用值填充选择框。

<select id="foo">
   <option value="">----</option>
   <option selected="selected" value="1"> Option1 </option>                           
   <option value="2"> Option 2 </option>
</select>

//I need something like this
jQuery('#foo:dropdown').on('visible', function(){
  //Do what you need to do
});

我尝试使用更改，但这不是我正在寻找的确切事件，因为我试图在实际进行任何选择之前用值填充框。此外，我无法使用点击，因为虽然它通过使用值填充选择框来工作，但是一旦我做出选择，再次调用脚本并在永不停止的圆圈中重置该框。

Answer 1

很好的问题和乐趣回答一个。这可以通过使用'click'来完成，是的，我知道每次单击选择框时它都会继续触发。但是等等，有一个技巧可以解决这个问题，我们可以为此设置一个标志。因此，加载脚本时标志（变量）为false，第一次单击select时，它将设置为true，脚本只执行一次。

$(document).ready(function() {
  var first_time = false;
  $('select').on('click', function() {
    if (!first_time) {
      console.log('Yes, here I am!');
      first_time = true;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>One</option>
  <option>Two</option>
</select>

Answer 2

这样有点建立Barry的答案，这就是我提出的解决方案。

首次加载页面时，会为var指定值0.当单击选择框时，该值立即增加1.然后该函数检查var现在是否等于1，如果是是，这表示下拉列表打开，函数触发。在完成需要完成的操作后，该值将减少2（新值-1）。这样，当您在选择框中进行选择（再次单击）时，在显示选择框时您只想做的事情不会再次触发。但是，它会在您下次单击它时触发，因为该值将再次等于1。上升并重复。

$(document).ready(function() {
    var aa = 0;
    $('#foo').on('click', function () {  
      aa++;      
      if (aa == 1) { //Basically, is dropdown open?
        //Do what you need to do when dropdown is open
        aa = -1; //Now assign new value to aa
      }         
    });  
 );

下拉事件中的jQuery，下拉可见

2 个答案: