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.

It's not possible http://stackoverflow.com/a/2800276/1272540 — Yann86, Aug 08 '14 at 10:47

score 2 · Accepted Answer · answered Aug 08 '14 at 11:39

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

This is not cross-browser though, only works in Chrome. But still ok. — hello, Aug 09 '14 at 02:01

score 1 · Answer 2 · answered Aug 08 '14 at 10:54

You can't really open a dropdown for someone unless you're replacing it with your own implementation of a dropdown. It's not reliable and also doesn't really work on mobile. The example you show isn't really a stock browser dropdown, it's something implemented in JavaScript.

If you are content with just assigning focus to the next dropdown (not replacing the dropdown with a JavaScript-based one) then the jQuery for this is fairly simple, and you can use something like this:

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

Put that into your jsFiddle demo (and also add jQuery 1.10 as well) and this will work. One thing of note, if they are using the keyboard to make a selection within a dropdown (up and down arrow keys) you don't want to change the focus since you don't know what option they want.

To get exactly what you describe, you really need to implement a JavaScript dropdown replacement that you can target to open/close upon command.

This one worked for me. I have sequential drop-downs like Country->State->City. When I select Country from dropdown-1, next dropdown State opens with the help of above code. I just need to focus on next dropdown ID `$('#selstate').focus();` after data is changes in previous dropdown. Thanks Liam. — G_real, Jul 24 '19 at 20:12

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

2 Answers2

Linked