jquery - 从上一个下拉列表中选择后如何自动删除下一个下拉列表？

Question

我的搜索表单有一个下拉选项，您可以在此处查看: DEMO .

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

<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>

这实际上类似于 http://www.zomato.com搜索下拉菜单，但我的搜索表单不太复杂，我使用 select 和 option 标签而不是 ul 和 li 标签。

Answer 1

您可以尝试以下方法

html

<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>

Jquery

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

DEMO