Jquery 下拉选择单击功能只工作一次

当用户选择一个县时，我试图使用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>

根据说明，使用.hide对选定元素隐藏选项不兼容跨浏览器

相反，我想你必须把他们从名单上删除。您可以同时在变量中存储完整的选项列表，以便在用户选择其他县时恢复选项

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

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

根据使用。隐藏对选择元素隐藏选项是不兼容跨浏览器的

相反，我想你必须把他们从名单上删除。您可以同时在变量中存储完整的选项列表，以便在用户选择其他县时恢复选项

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

---

另一个解决方案是使用disabled=disabled来禁用您不想要的选项。当然，它们仍会保留在列表中，但无法选择。您正在隐藏基于县选择的选项。。但当选择其他选项时，您必须将其显示出来

试一试

---

您正在从county隐藏基于选择的选项。。但当选择其他选项时，您必须将其显示出来

试一试

---

这应该是可行的，请检查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>

---

这应该是可行的，请检查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>

---

当前，您隐藏了不需要的选项，但在选择更改时不再显示这些选项。因此，简单的解决方案就是：

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

演示：

---

注意：您可以在选择上使用更改事件，而不是在每个选项上使用单击事件。另外，我不会使用.live，除非您要附加事件处理程序的元素在绑定处理程序后将被动态创建/更改（我认为这里不是这种情况），而且在任何情况下，jQuery 1.7都不推荐使用.live，所以改用.on，或者。如果您使用的是早期版本，则委派。

当前您隐藏了不需要的选项，但在选择更改时不再显示这些选项。因此，简单的解决方案就是：

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

演示：

---

注意：您可以在选择上使用更改事件，而不是在每个选项上使用单击事件。另外，我不会使用.live，除非您要附加事件处理程序的元素在绑定处理程序后将被动态创建/更改（我认为这里不是这种情况），而且在任何情况下，jQuery 1.7都不推荐使用.live，所以改用.on，或者。如果您使用的是早期版本，请委派。

@user971824请注意，此解决方案不应跨浏览器兼容，尤其是IE的旧版本。有关详细信息，请参阅我的答案。感谢Christofer Eliasson，我如何将其转换为跨浏览器兼容？@user971824请注意，此解决方案不应跨浏览器兼容，特别是旧版本的IE。更多信息请参见我的答案。谢谢Christofer Eliasson我如何将其转换为跨浏览器兼容？