JS Create delay on Select Drop-Down Menu Open

Question

I have a drop-down menu that lists subjects. I am loading those subjects via an AJAX call. The subjects load properly, they just don't load fast enough to populate the select menu until AFTER the menu has been opened. This causes the user to need to open the menu, close the menu, then open it again.

How can I cause a delay on the drop-down-menu open to give the response enough time to populate the drop-down menu? Thanks for any and all help.

---

Code:

Drop-down Menu

<div id="subjectForm" class="form-row">
    <label>1) Subject Selection:</label>
    <select name="subject" id="subjectSelect" class="input-medium">
        <option value="0">All</option>
    </select>
</div>

AJAX Call

document.getElementById("subjectForm").addEventListener("click", function( event ) {
    var selectCount = $('#subjectSelect option').size();

    if(selectCount == 1) {
        $.ajax({
            url: '/v2/subjects?',    
            method: 'GET',
            data: {'core': number},
            success: function (data) {
                // Populates the $subjectSelect filter with subjects
                // For each grade brought back from response, add it to the grade filter
                $.each(data, function(i, subject){
                    $('#subjectSelect')
                        .append($('<option></option>')
                        .attr("value", subject.id)
                        .text(subject.title));
                });// each
            }// success
        });// ajax
    }// end if
}, false);// #subjectForm clicked

Answer 1

Since the number value is defaulted, I would change the load to happen on document ready, rather than waiting until the click event.

$(document).ready(function () {
    var loadSubjectSelect = function(){
        var selectCount = $('#subjectSelect option').size();
        if(selectCount == 1) {
            $.ajax({
                url: '/v2/subjects?',    
                method: 'GET',
                data: {'core': number},
                success: function (data) {
                    // Populates the $subjectSelect filter with subjects
                    // For each grade brought back from response, add it to the grade filter
                    $.each(data, function(i, subject){
                        $('#subjectSelect')
                            .append($('<option></option>')
                            .attr("value", subject.id)
                            .text(subject.title));
                    });
                }
            });
        }
    };

    loadSubjectSelect();    
})();

Then when you add the other menu, you can call loadSubjectSelect() on its click event.