Populate Dropdown only if dropdown is clicked

Question

I can't manage to find out how to initiate a click event by a user clicking on a dropdown. I want to populate the dropdown ONLY if the user clicks the dropdown which will be rare. In addition, it depends on several other values selected on the page. So basically, how do I fire off an event if a user just simply clicks on the dropdown to see the options.

I've tried, $('select').click but to no avail.

It works if you don't have any options. But if there are current options, no luck.

Solution 1

It should work. Here I've done it and its working.

$("select").on("click", function() {
    $(this).append("<option>1</option><option>2</option>");
});

Updated: http://jsfiddle.net/paska/bGTug/2/

New code:

var loaded = false;
$("select").on("click", function() {
    if (loaded)
        return;
    $(this).append("<option>1</option><option>2</option>");
    loaded = true;
});

Solution 2

Try using the focus event instead, that way the select will be populated even when targeted using the keyboard.

$('select').on('focus', function() {
    var $this = $(this);
    if ($this.children().length == 1) {
        $this.append('<option value="1">1</option><option value="2">2</option>');
    }
});​

View simple demo.

UPDATE

Here is a new version that uses unbind to only fire the event handler once. This way you are able to use your alert without adding any option elements to change the outcome of the condition as the previous solution required.

$('select').on('focus', function() {

    var $this = $(this);

    // run your alert here if it´s necessary
    alert('Focused for the first time :)');

    // add the new option elements
    $this.append('<option value="1">1</option><option value="2">2</option>');

    // unbind the event to prevent it from being triggered again
    $this.unbind('focus');
});​

Hope that is what you are looking for.

Solution 3

Getting the dropdown to automatically open after the click is trickier:

// Mousedown is used so IE works
$('#select_id').on('focus mousedown', function (e) {
    var data;
    $(this).off('focus mousedown');
    $.ajax({async: false, 
            type: 'GET', 
            url: 'url that returns the options',
            success: function (d) { data = d; }
           });
    $(this).find('option').remove().end().append(data);
    // Prevent IE hang by waiting awhile
    var t = new Date().getTime(); while(new Date().getTime() < t + 200) {}
    return true;
});