Close a SELECT dropdown list programmatically with

Question

I have a dropdown that is initialized with one single value. When the user clicks it, the single element is removed and a new element is added saying "Loading", then an AJAX call is issued to the server and when returns, the new values are added to the control.

The problem is that the control remains open while updating, and I would like to close it.

This is an example: http://jsfiddle.net/vtortola/CGuBk/2/

The example's AJAX does not get data probably because something wrong I am doing when calling the jsfiddle api, but it shows how the SELECT remains open during update.

I want to know how to close the dropdown list programmatically w/o focus in another input.

Answer 1

Just add this line end of your close within click.

$(this).blur();  

So it will look like

$select.click(function(e){

    $select.html('<option value="-1">Loading</option>');

    $(this).blur();
    ......
    ...
});

DEMO

HAH ! If we have an issue with Chrome new version then:

Take a fake select like following:

<select class="fake" style="display: none">
    <option value="-1">Loading</option>
</select>

and do something like:

$select.click(function(e) {
    $(this).hide(0); // hide current select box

    //$select.html('<option value="-1">Loading</option>');

    $('select.fake').show(0); // show the fake slide

    $.ajax({
           // your code
        }).done(function(data) {

           $('select.fake').hide(0);
           $select.show(0);

        })
        ......
    }):

DEMO

Answer 2

Old post I know but I have a very simple solution.

$(someSelectElement).on('change', function(e) {
    e.target.size = 0    
}

That will collapse the select element if you click on any item in the list.

Answer 3

I think all you need to do is target something else or should I say lose focus on the select (blur it)

<select>
    <option value="0">Initial Value</option>
</select>

var $select = $('select');
$select.click(function(e){

    $select.html('<option value="-1">Loading</option>');

    $.ajax({
        url: '/echo/json/',
        method:'post',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: { json: JSON.stringify([1, 2, 3]), delay:1 }
    }).done(function(data){

        $.each($.map(data, function (item, i) {
                    return "<option value='" + item +"' >" + item + "</option>";

                }), function (i, item) {
                    $element.append(item);
                });

    }).fail(function(){
        alert('error');
    });

   e.preventDefault();
   e.stopPropagation(); 
   $(this).blur();    
});