Question

当用户选择一个县时，我正在尝试使用jquery来缩小我对城镇的选择范围。以下仅适用一次：

$('#county > option').live("click",function(){

    var clicked_county = $(this).val();
    $('#town > option').not("."+clicked_county).hide();
});


<select name="county" id="county">
  <option>All Countys</option>
  <option>Middlesex</option>
  <option>Berkshire</option>
  <option>Bedfordshire</option>
</select>

<select name="town" id="town">
  <option>All Towns</option>
  <option class="Middlesex">Ruislip</option>
  <option class="Middlesex">Hillindon</option>
  <option class="Uxbridge">Uxbridge</option>
</select>

Answer 1

您正在根据#county中的选择隐藏选项..但是当您选择其他选项时，您必须将其显示回来。

尝试

$('#town > option').show().not("."+clicked_county).hide();

Answer 2

目前，您隐藏了不需要的选项，但在选择更改时从不再显示它们。所以简单的解决方案就是说：

$('#town > option').show().not("."+clicked_county).hide();

但是，隐藏选项并不适用于所有浏览器 - 对于某些浏览器，您需要实际删除它们，所以我建议如下：

$(document).ready(function() {
    var $town = $("#town"),
        // get a copy of all the towns
        $towns = $("#town > option").clone();

    $("#county").change(function() {
        var selCounty = $(this).val();

        // remove all, then add back in the appropriate ones
        $town.children().remove();
        if (selCounty=="All Countys")
           $town.append($towns);
        else
           $town.append($towns.filter("." + selCounty));
    });
});

演示：http://jsfiddle.net/VQ7CJ/

（注意：您可以在每个选项上使用select事件而不是click事件更改事件。除非您要附加事件处理程序的元素将被创建，否则我不会使用.live() /绑定处理程序后动态更改，我不认为这是这种情况，并且在任何情况下{j} 1.7都不推荐使用.live()，所以请改用.on()或.delegate()如果您使用的是早期版本。）

Answer 3

根据this SO question使用.hide()隐藏select元素中的选项不是跨浏览器兼容的。

相反，我猜你必须从列表中实际.remove()。您可以在此期间在变量中存储完整的选项列表，以便在用户选择其他县时可以恢复选项。

This SO answer提供了一个小型jQuery插件，可以为您提供跨浏览器支持以满足类似需求。

另一种解决方案是使用disabled="disabled"来禁用您不想要的选项。它们当然仍会保留在列表中，但不可选择。

Answer 4

这应该可行，请查看javascript：

<select name="county" id="county">
  <option>All Countys</option>
  <option>Middlesex</option>
  <option>Berkshire</option>
  <option>Bedfordshire</option>
</select>

<select name="town" id="town">
  <option>All Towns</option>
  <option class="Middlesex">Ruislip</option>
  <option class="Middlesex">Hillindon</option>
  <option class="Bedfordshire">Uxbridge</option>
</select>

    <script type="text/javascript">
  $('#county').live("change",function(){
    $('#town > option').show();
    var clicked_county = $(this).val();
    $('#town > option').not("."+clicked_county).hide();
  });
</script>

下拉选择点击功能仅适用一次

4 个答案: