jQuery on dropdown event, dropdown visible

Question

Есть ли какое-либо событие jQuery, которое ловит, когда выпадающее меню selectbox показано/видимо? Я пытаюсь заполнить selectbox значениями, когда выпадающее меню показано.

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

Я попытался использовать на изменения, но это не точное событие я ищу, потому что я пытаюсь заполнить поле со значениями до того, как выбор сделан на самом деле. Кроме того, я не могу использовать клик, потому что, хотя он работает, заполняя selectbox со значениями, как только я делаю выбор, сценарий вызывается снова, и поле сбрасывается в бесконечном круге.

Answer 1

Так вроде строительства от ответа Барри, это решение, которое я придумал.

При первой загрузке страницы переменной присваивается значение 0. При нажатии кнопки выбора значение сразу увеличивается на 1. Затем функция проверяет, равна ли теперь переменной var 1, и если это означает, что раскрывающееся меню открыто, и функция срабатывает. После того, как вы сделаете то, что нужно сделать, значение уменьшается на 2 (новое значение -1). Это значит, что когда вы делаете выбор в selectbox (сделайте еще один клик), все, что вы хотели сделать только при отображении selectbox, не срабатывает снова. Однако он будет срабатывать при следующем щелчке по нему, потому что значение снова будет равно 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 
     }   
    }); 
); 

Answer 2

Хороший вопрос и удовольствие, чтобы ответить на него. Это можно сделать, используя «щелчок», и да, я знаю, что он будет стрелять каждый раз, когда вы нажмете на поле выбора. Но подождите, есть хитрость, чтобы исправить это, мы можем установить для этого флаг. Таким образом, флаг (переменная) является ложным при загрузке скрипта, и при первом нажатии на выбор он получает значение 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>