下拉選擇點擊功能只能工作一次

我試圖用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>

來源

2012-02-15 Malcr001

當前您隱藏了不需要的選項，但在選擇更改時再也不顯示它們。所以簡單的解決方案只是說：

$('#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/

（注意：您可以選擇使用更改事件，而不是在每一個選項的單擊事件我也不會用.live()除非你要附加的元素（一個或多個）。事件處理程序將被創建/更改d ynamically結合後的處理程序，這是我，如果你是在一個早期版本不認爲這裏的情況，在任何情況下.live()被棄用的jQuery 1.7的，所以使用.on()代替，或.delegate()。）

來源

2012-02-15 22:39:34 nnnnnn

感謝這項工作:) – Malcr001 2012-02-15 22:43:17

+1爲跨瀏覽器兼容的解決方案。 – 2012-02-15 22:44:22

根據使用.hide()隱藏從選擇元素選項this SO question是不是跨瀏覽器兼容。

相反，我想你必須從列表中實際上.remove()他們。在此期間，您可以在變量中存儲完整的選項列表，以便在用戶選擇另一個縣時恢復選項。

This SO answer提供了一個小型的jQuery插件，可以爲您提供類似需求的跨瀏覽器支持。

另一種解決方案是使用disabled="disabled"來禁用不需要的選項。他們當然仍然留在名單中，但不會被選中。

來源

2012-02-15 22:25:55

你是隱藏基於從#county選擇的選項..但是你必須在選擇其他選項，以顯示他們回來..

嘗試

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

來源

2012-02-15 22:27:42

謝謝您的工作:) – Malcr001 2012-02-15 22:33:17

@ user971824請注意，此解決方案不應該跨瀏覽器兼容，尤其是舊版本的IE。查看我的答案以獲取更多信息。 – 2012-02-15 22:38:29

感謝Christofer Eliasson我如何將它轉換爲跨瀏覽器兼容？ – Malcr001 2012-02-15 22:41:23

這應該工作，檢查的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>

來源

2012-02-15 22:33:36 mpm

下拉選擇點擊功能只能工作一次

回答

相關問題