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

问题

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.

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

回答2:

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.

来源：https://stackoverflow.com/questions/25201098/how-to-automatically-drop-the-next-dropdown-after-selecting-from-previous-dropdo

标签

jquery

html

dropdownbox