CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-select
vtortola
vtortola

Reputation: 35905

Close a SELECT dropdown list programmatically with Javascript/jQuery

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.

Upvotes: 33

Views: 62965

Answers (11)

Stephen
Stephen

Reputation: 115

Please try this one, work for me:

$("#mySelect").dropdown('toggle');

Upvotes: 0

Bogdan Chernovol
Bogdan Chernovol

Reputation: 71

The easiest way I found to close a selected element is to disable it temporarily:

$selectElement.attr('disabled', true);

setTimeout(() => {
   $selectElement.attr('disabled', false);
}, 4);

Upvotes: 0

Misaz
Misaz

Reputation: 3985

SOLUTION 1 I found very easy solution.

select.style.display = "none";
setTimeout(function () {
    select.style.display = "block";
}, 10);

This hide element in DOM, this cause that dropdown will be closed and then with 10ms delay (without delay it does not work) return it into DOM.

SOLUTION 2: Little bit more complicated but without delay is totaly remove element from DOM and then immediately return it back.

var parent = select.parentElement;
var anchor = document.createElement("div");
parent.insertBefore(anchor, select);
parent.removeChild(select);
parent.insertBefore(select, anchor);
parent.removeChild(anchor);

This stores parrent of element, then bring anchor before select. Anchor is there for restoring select in the same position in DOM then before. Of course it can be implemented to function select element.

HTMLSelectElement.prototype.closeDropdown = function () {
    var parent = this.parentElement;
    var anchor = document.createElement("div");
    parent.insertBefore(anchor, this);
    parent.removeChild(this);
    parent.insertBefore(this, anchor);
    parent.removeChild(anchor);
}

and then just call

select.closeDropdown();

Example

Upvotes: 1

Vern Jensen
Vern Jensen

Reputation: 3560

In case anyone else out there is using Angular2, the solution that worked there for me was to add a (focus) event that calls $($event.srcElement).attr("disabled","disabled");

I then add a timeout to re-enable the element when I want it to become active again.

Upvotes: 0

user3619165
user3619165

Reputation: 408

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.

Upvotes: 0

panser
panser

Reputation: 2129

$('.select').on('change', function () {
    $(this).click();
});

Upvotes: 0

Jonathan
Jonathan

Reputation: 773

I know this is an old question and already have an answer but I think the following solution can be a fair way to achieve the goal.

You can simulate the closure of the select by re-rendering it. In jQuery you can implement a simple plugin to achieve that:

$.fn.closeSelect = function() {
    if($(this).is("select")){
        var fakeSelect = $(this).clone();
        $(this).replaceWith(fakeSelect);
    }
};

and use it this way:

$("#mySelect").closeSelect();

Upvotes: 3

Huangism
Huangism

Reputation: 16438

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

Upvotes: 5

thecodeparadox
thecodeparadox

Reputation: 87073

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

Upvotes: 12

Death
Death

Reputation: 2017

I'm not sure about anyone else, but I'm using the latest stable build of Chrome, and none of the other answers involving .blur() work for me.

This question asks the inverse: Programmatically open a drop-down menu

The conclusion that seemed to be obtained is that it's not possible due to the way the browser handles field element clicks.

A better solution would be to replace the dropdown with a pure HTML one and hide it when needed with a simple .hide() command.

Upvotes: 14

freefaller
freefaller

Reputation: 19953

After...

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

Try adding...

$select.blur();

Upvotes: 7

Related Questions