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).trigger('click');
angular.element(el).trigger('mousedown');

Nothing works.

I also tried

$scope.doSomething = function(){
    setTimeout(function() {
        var el = document.getElementById('test');
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        worked = el.dispatchEvent(e);
    }, 0);

}

The above set focus but do not open the select.

Is it possible?

http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due — Praveen Prasannan, May 12 '14 at 12:53
thanks, i tried it but it doesn't work in angularjs. I updated my question — user727507, May 12 '14 at 13:00
sorry, my mistake. It was the timeout that caused the problem. Thanks — user727507, May 12 '14 at 14:06
pretty nice, is there a way to do this in IE? It currently doesn't work for me in IE — SoluableNonagon, Jun 19 '14 at 18:36
See this answer: https://stackoverflow.com/a/73755107/11322237 — Gabriel Arghire, Sep 17 '22 at 13:07

score 1 · Answer 1 · edited Sep 13 '19 at 08:22

1

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>

edited Sep 13 '19 at 08:22

Shayki Abramczyk

36,824
16
89
114

answered Sep 13 '19 at 08:03

Prashant Kanak

67
4

score 1 · Answer 2 · answered Jan 28 '21 at 20:38

You can achieve this by setting the size of the select and having it float using position:absolute.

<div  style="position:relative">.<select style="position:absolute;top:-8px;left:-20px" onClick="onAssign(this)">   
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select></div>

function openMySelect(){
  document.querySelector(‘#mySelect’),size=YOUR_OPTIONS.length;
}

function onAssign(data,select){
  select.size=1
  // your logic
}

score 0 · Answer 3 · answered Apr 26 '21 at 14:40

I think I found a solution, at least works for me:

First, try to get the arrow of the ng-select and then force a mousedown event

let arrowSpan = document.querySelector('.ng-arrow-wrapper');
arrowSpan.dispatchEvent(new CustomEvent('mousedown', { bubbles: true }))

Select span arrow

haste · Answer 4 · 2016-06-05T16:23:58.167

-1

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

edited Jun 05 '16 at 16:23

answered Apr 22 '16 at 15:37

haste

1
3

Doesn't work for me on Firefox, only on Chrome. What is the issue? – Karel Bílek Jun 02 '16 at 15:45
Dear Karel, I test it on Firefox, it work. May be javascript error? – haste Jun 05 '16 at 16:17

score -1 · Answer 5 · edited May 23 '17 at 12:24

-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');

edited May 23 '17 at 12:24

Community

1
1

answered Aug 17 '16 at 07:57

mirik

356
4
18

your answer is not working either(i.e. the select menu is not opened). tested in Chrome 65 – themihai Apr 02 '18 at 21:36

score -8 · Answer 6 · answered Feb 26 '15 at 11:13

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

its dishonorable to copy someone elses genius solution, parrot it as your own and not give them any credit. — r3wt, Mar 19 '15 at 05:29

How to open select programmatically

6 Answers6

Linked