Jquery 从上一个下拉列表中选择后，如何自动下拉下一个下拉列表？

我的搜索表单有一个下拉选择，您可以在这里看到：

我想知道如何在从上一个下拉列表中选择一个选项后自动删除下一个下拉列表？例如，在从类型中选择一个选项后，我希望Rooms下拉列表能够自动删除，而无需用户单击它

<select name="type">
<option value="">Select Type</option>
<option value="commercial">Commercial</option>
<option value="condo">Condo</option>
<option value="single-family">Single Family</option>
<option value="townhouse">Townhouse</option>
</select>

<select name="rooms">
<option value="">Select Rooms</option>
<option value="1-2-bedrooms">1-2 Bedrooms</option>
<option value="2-3-bedrooms">2-3 Bedrooms</option>
<option value="3-4-bedrooms">3-4 Bedrooms</option>
<option value="4-bedrooms">4 + Bedrooms</option>
</select>

---

这实际上类似于搜索的下拉列表，但我的搜索表单不太复杂，我使用的是选择和选项标签，而不是ul和li标签。

除非您使用自己的下拉列表实现，否则您无法真正为某人打开下拉列表。它不可靠，在移动设备上也不起作用。您展示的示例并不是真正的股票浏览器下拉列表，而是用JavaScript实现的

如果您满足于只将焦点分配给下一个下拉列表，而不使用基于JavaScript的下拉列表替换该下拉列表，那么jQuery就相当简单，您可以使用如下内容：

$('select[name^="type"]').on("change",function() {
    $('select[name^="rooms"]').focus();
});
$('select[name^="rooms"]').on("change",function() {
    $('select[name^="area"]').focus();
});
$('select[name^="area"]').on("change",function() {
    $('select[name^="price"]').focus();
});
$('select[name^="price"]').on("change",function() {
    $('input[type^="submit"]').focus();
});

将其放入JSFIDLE演示中，并添加jQuery1.10，这样就可以了。需要注意的是，如果他们使用键盘在下拉上下箭头键中进行选择，您不想更改焦点，因为您不知道他们想要什么选项

---

为了准确地获得您所描述的内容，您确实需要实现一个JavaScript下拉替换，您可以将其作为打开/关闭命令的目标

您可以尝试以下方法

html

---

这不可能在Chrome@Yann86中起作用，这可能是最好的答案。。谢谢。这不是跨浏览器的，只在Chrome中有效。但还是没问题。这个对我有用。我有连续的下拉列表，如国家->州->城市。当我从下拉列表1中选择Country时，在上面代码的帮助下，下一个下拉列表状态打开。我只需要关注下一个下拉列表ID$'selstate'。focus；在上一个下拉列表中更改数据后。谢谢你，利亚姆。

<select name="type" id = "select1">
<option value="">Select Type</option>
<option value="commercial">Commercial</option>
<option value="condo">Condo</option>
<option value="single-family">Single Family</option>
<option value="townhouse">Townhouse</option>
</select>

<select name="rooms" id = "select2">
<option value="">Select Rooms</option>
<option value="1-2-bedrooms">1-2 Bedrooms</option>
<option value="2-3-bedrooms">2-3 Bedrooms</option>
<option value="3-4-bedrooms">3-4 Bedrooms</option>
<option value="4-bedrooms">4 + Bedrooms</option>
</select>

showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};
var drop = document.getElementById('select2');
$('#select1').change(function(e){
    e.preventDefault();
      $("#select1").blur();
});

$("#select1").blur(function(){

    setTimeout(function(){showDropdown(drop);},0);
});