How to open select programmatically

Question

Does anyone know if it is possible to open a select programmatically in angularjs. Ive tried

angular.element(el).trigger(\'focus\');
angular.element(el).trig         


        

Answer 1

The answer provided by haste doesn't work:

var cb = element[0].getElementsByClassName('some-selector')[0];
var event = new MouseEvent('mousedown', {
    'view': window,
    'bubbles': true,
    'cancelable': true
});                        
cb.dispatchEvent(event);

I use more simple method:

var cb = element[0].getElementsByClassName('some-selector')[0];
angular.element(cb).triggerHandler('click');

Answer 2

try this

function openSelect(selectId) {
    var event = new MouseEvent('mousedown', {
        'view': window,
        'bubbles': true,
        'cancelable': true
    });
    var cb = document.getElementById(selectId);
    cb.size=4;
    cb.dispatchEvent(event);
}
openSelect("testId");

or read more here Triggering built-in events

Answer 3

Try this for Hover:

JS:

$(document).ready(function(){
$("#selectId").hover(function(){
   $(this)[0].size=$(this).find("option").length;
});
$("#selectId").click(function(){
   $(this)[0].size=0;
});
});

HTML:

<select id="selectId">
  <option>Volvo</option>
  <option >Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

Answer 4

i had same problem and finally i'm create my own directive:

angular.module('openselect', [])
    .directive('openselect', function () {
        var showDropdown = function (element) {
            var event;
            event = document.createEvent('MouseEvents');
            event.initMouseEvent('mousedown', true, true, window);
            element.dispatchEvent(event);
        };
        return {
            restrict: 'A',
            scope: {
                'elemento': '@'
            },
            link: function (scope, elem, attrs, ctrl) {
                elem.bind('click', function () {
                    var elemento = document.getElementById(scope.elemento);
                    showDropdown(elemento);
                });
            }
        };
    });

To use:

<div style="position:relative">
<span ng-show="submittedForm.contry.$error.required && co_form.contry.$error.required" class="label label-danger">Indicanos tu país</span>
<select name="country" class="form-control input-md" ng-model="formCheckout.country" id="myCountry" placeholder="España" required>
    <option value="6" selected="selected">España</option>
    <option value="1">Alemania</option>
    <option value="15">Portugal</option>
</select>
<span class="glyphicon glyphicon-chevron-down" style="position: absolute; right: 10px; color: #A6A6A6; top: 18px;" openselect elemento="myCountry"></span>

Adds directive to any tag passing id of select (elemento) that you want to open.

You can see the very basic javscript code inside directive if you want to use in other context;

hope it helps ;D