Question

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

我想知道在从上一个下拉列表中选择一个选项后，如何自动删除下一个下拉列表？例如，在从Type中选择一个选项之后，我希望Rooms下拉列表在没有用户点击的情况下自动删除。

<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

Answer 2

除非您使用自己的下拉列表替换它，否则您无法为某人打开下拉列表。它不可靠，也不适用于移动设备。您展示的示例并非真正的股票浏览器下拉菜单，它是用JavaScript实现的。

如果您满足于将焦点分配给下一个下拉列表（不是用基于JavaScript的下拉列表替换下拉列表），那么jQuery对此非常简单，您可以使用以下内容：

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

将它放入你的jsFiddle演示中（并且还添加jQuery 1.10），这将有效。需要注意的是，如果他们使用键盘在下拉列表中进行选择（向上和向下箭头键），您不想改变焦点，因为您不知道他们想要什么选项。 / p>

要准确了解您所描述的内容，您确实需要实现一个JavaScript下拉替换，您可以根据命令将其打开/关闭。

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

2 个答案: