如何从前面的下拉菜单中选择后自动删除下一个下拉菜单？ [英] How to automatically drop the next dropdown after selecting from previous dropdown?
问题描述
我的搜索表单有一个下拉选项，您可以在这里看到：
DEMO
我想知道如何从上一个下拉菜单中选择一个选项后自动放下下一个下拉菜单？例如，从Type中选择一个选项后，我希望Rooms下拉菜单在用户不点击的情况下自动删除。
< select name =type>
< option value =>选择类型< / option>
< option value =commercial>商业< / option>
< option value =condo>公寓< / option>
< option value =单身家庭>单身家庭< / option>
< option value =townhouse>联排别墅< / option>
< / select>
< select name =rooms>
< option value =>选择房间< / option>
< option value =1-2-bedrooms> 1-2间卧室< / option>
< option value =2-3-bedrooms> 2-3间卧室< / option>
< option value =3-4-bedrooms> 3-4间卧室< / option>
< option value =4-bedrooms> 4 +卧室< / option>
< / select>
这实际上类似于 http://www.zomato.com 下拉式搜索，但我的搜索表单更简单，我使用的是选择标签和选项标签，而不是ul和li标签。
您可以尝试以下方法
html
< select name =typeid =select1>
< option value =>选择类型< / option>
< option value =commercial>商业< / option>
< option value =condo>公寓< / option>
< option value =单身家庭>单身家庭< / option>
< option value =townhouse>联排别墅< / option>
< / select>
< option value =>选择房间< / option>
< option value =1-2-bedrooms> 1-2间卧室< / option>
< option value =2-3-bedrooms> 2-3间卧室< / option>
< option value =3-4-bedrooms> 3-4间卧室< / option>
< option value =4-bedrooms> 4 +卧室< / 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（）;
} ）;
$ b $（＃select1）。blur（function（）{
setTimeout（function（）{showDropdown（drop）;}，0）;
}）;
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.
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);
});
这篇关于如何从前面的下拉菜单中选择后自动删除下一个下拉菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
