ドロップダウン選択のクリック機能は一度しか動作しません

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

現在のところ、不要なオプションは非表示にしていますが、選択が変更されたときに再び表示されることはありません。

： - あなたが実際にそれらを削除する必要があるいくつかのブラウザのために、私は、次のようなものをお勧めしたい

$('#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どのような場合でも.live()はjQuery 1.7で廃止されましたので、代わりに.on()を使用するか、以前のバージョンを使用している場合は.delegate()を使用してください）

Answer 2

選択要素からオプションを隠すために.hide()を使用してthis SO questionによると、クロスブラウザの互換性はありません。

代わりに、実際には.remove()をリストから選択する必要があります。その間に変数の完全なリストを変数に格納することができます。これにより、ユーザーが別の郡を選択した場合にオプションを復元できます。

This SO answerは、同様のニーズに対してクロスブラウザサポートを提供する小さなjQueryプラグインを提供します。

もう1つの解決策は、望ましくないオプションを無効にするためにdisabled="disabled"を使用することです。彼らはもちろん、まだリストに残るだろうが、選択できないだろう。

Answer 3

JavaScriptを確認し、これは動作するはず

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

Answer 4

を試してみてくださいあなたは#countyからの選択に基づいてオプションを隠している..しかし、あなたは他のオプションが選択されているときにそれらをバック示さなければならない。..

：

<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>