How to automatically drop the next dropdown after selecting from previous dropdown?

Question

I have a dropdown selection for my search form, you can see it here: DEMO.

I would like to know how I can automatically drop the next dropdown after selecting an option from the previous dropdown? Like for example, after selecting a choice from Type, I would like the Rooms dropdown to automatically drop without the user clicking it.

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

This is actually similar to http://www.zomato.com dropdown for the search but my search form is less complicated and I'm using select and option tags instead of ul and li tags.

Answer 1

You can try the following approach

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