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

Question

是否有任何 jQuery 事件在选择框下拉列表为 shown/visible 时捕获？一旦显示下拉列表，我将尝试用值填充选择框。

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

我尝试使用 on change，但这不是我要查找的确切事件，因为我试图在实际进行任何选择之前用值填充该框。此外，我不能在单击时使用，因为虽然它通过用值填充选择框来工作，但一旦我做出选择，脚本就会再次调用，并且框会在一个永无止境的圆圈中重置。

Answer 1

问得好，回答起来也很有趣。这可以通过使用 'click' 来完成，是的，我知道每次单击 select 框时它都会继续触发。但是等等，有一个技巧可以解决这个问题，我们可以为此设置一个标志。因此，加载脚本时标志（变量）为 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 在下拉事件中，下拉可见

jQuery on dropdown event, dropdown visible

javascript

jquery

events

show

dropdown