Javascript 在选择更改时打开下一个选择元素

我有几个连续的select元素，用户必须在其中选择一个选项。为了方便用户，并确保他们选择了一个选项，我所做的是在选择一个选项后自动打开下一个选择

拨弄

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>

---

我认为这是不可能的。您需要使用一个自定义的选择小部件来完成这个跨浏览器的工作演示

旧SO参考：

希望这符合您的需要

：）

代码

$('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;
}

---

简言之，你不能。请参阅：您是否尝试使用$（this）.next（）而不是$（'.select'）。next（）由于这是不可能的，所以它几乎可以完美地工作，但每一滴都会进入第二个菜单（在选择第二个选项后，它不会移动到第三个菜单）。但这对我来说已经足够了。Thanksaweet，修复，更流畅的版本：

：）

很高兴它有帮助！好了，你真是个天才，我的男人只有放弃的人说有些事情是不可能的这在Firefox中不起作用，只是提醒一下。不过，对于使用Chrome的用户来说，这仍然是一个很好的增强功能。它不需要跨浏览器，这不是一个必要的功能，但它让用户更容易使用，所以我会在任何浏览器上使用它。不过，一致性很好。

$('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;
}