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.
Answer
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.