On select change open up the next select element

Question

I have a few consecutive select elements where the user must chose an option. What I am trying to do for user convenience and to make sure they chose an option is automatically open the next select after an option has been picked

Fiddle http://jsfiddle.net/zYUfd/1/

HTML

<form>
    <select name="first">
        <option value=""></option>
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </select> 
    <select name="two">
        <option value=""></option>
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </select> 
    <select name="three">
        <option value=""></option>
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </select> 
</form>

jquery

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

In short, you can't. See: http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due — Kolby, Feb 25 '14 at 21:20
Did you try using $(this).next() instead of $('.select').next() — Matt Pileggi, Feb 25 '14 at 21:21

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

Working Demo : http://jsfiddle.net/4cgt3/ and this http://jsfiddle.net/4cgt3/3/

Old SO reference: Open a select drop down on click of checkbox using jquery

Hope this fits your needs :)

code

$('select').on('change', function () {

    'use strict';
       $(this).next().focus().get(0).dispatchEvent(doClick());

});

var doClick = function () {
    'use strict';
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    return event;
}

edited May 23 '17 at 11:45

Community

1
1

answered Feb 25 '14 at 21:23

Tats_innit

33,991
10
71
77

1

so much for this being impossible, this almost works perfectly but every drop goes to the second menu, (after selecting the second option it does not move to the third). But this may be enough for me to play around with. thanks – user934902 Feb 25 '14 at 21:25
1

saweet, fixed, much smoother version here: http://jsfiddle.net/4cgt3/3/ `:)` Glad it helped! – Tats_innit Feb 25 '14 at 21:28
1

boom there it is, you are a genius my man only quitters say something is impossible – user934902 Feb 25 '14 at 21:29
1

This doesn't work in Firefox, just a heads up. Still a nice enhancement for people using Chrome, though. – Bill Criswell Feb 25 '14 at 21:30

Bill Criswell · Answer 2 · 2014-02-25T21:30:45.133

0

I don't think this is possible. You would need to use a custom select widget to accomplish this cross browser.

edited Feb 25 '14 at 21:30

answered Feb 25 '14 at 21:21

Bill Criswell

32,161
7
75
66

1

its ok that its not cross browser, its not an essential function but it makes it easier for the user so ill take it on whatever browser it will work on – user934902 Feb 25 '14 at 21:31
Consistency is nice, however. – Bill Criswell Feb 25 '14 at 21:39

On select change open up the next select element

2 Answers2