jQueryの：ボックス選択

Question

ドロップダウンに基づく条件付きショー要素私は2番目のドロップダウンリストの内容は、最初の1で行った選択に依存している、二つの関連ドロップダウンリストを持っています。たとえば、次のHTMLコードでは、まずアプリケーションメソッドを選択します。アプリケーション方法として空中を選択した場合は、空中サイズdistなどのさらなる質問に答えます。それ以外の場合は、地面スプレータイプに答える必要があります。

ので、Webページがロードされると、二つの第二レベルのドロップダウンリストは、（空中サイズDIST。、および地上スプレータイプが。）隠されています。これらは、最初の選択肢（適用方法）で関連選択が行われた場合にのみ表示されます。

私は（jQueryのコードの下）にjQueryでこの機能を実現することができています。しかし、私のアプローチはかなり愚かです。私の質問は次のとおりです。

1. 行全体を選択する方法は、その配列を数える使用せず、あり（n番目の子（））？要素IDの選択に基づいて行全体を選択できますか？たとえば、最初に$（ '＃id_A'）を選択してから、選択内容を行全体に展開できますか？

2. すべての可能な選択肢（（$（this）.val（）== "X"））を比較するのではなく、この非表示または表示機能を実現するより良い方法がありますか？

ありがとう！ここで

は、HTMLコードで、フォームがジャンゴによって生成されます。ここでは

<div class="articles"> 
    <form method="GET" action=_output.html> 
     <table align="center"> 
<tr><th><label for="id_application_method">Application method:</label></th><td><select name="application_method" id="id_application_method"> 
<option value="">Pick first</option> 
<option value="A">Aerial</option> 
<option value="B">Ground</option> 
</select></td></tr> 

<tr><th><label for="id_A">Aerial Size Dist:</label></th><td><select name="aerial_size_dist" id="id_A"> 
<option value="A1" selected="selected">A1</option> 
<option value="A2">A2</option> 
</select></td></tr> 

<tr><th><label for="id_B">Ground spray type:</label></th><td><select name="ground_spray_type" id="id_B"> 
<option value="B1" selected="selected">B1</option> 
<option value="B2">B2</option> 
</select></td></tr> 
</table>     
</form> 
</div> 

は、jQueryのコードです：

<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> 

<script>$(function() { 
    $("tr:nth-child(2)").hide(); 
    $("tr:nth-child(3)").hide(); 

    $('#id_application_method').change(function() { 
    ($(this).val() == "A") ? 
    $("tr:nth-child(2)").show() : $("tr:nth-child(2)").hide(); 

    ($(this).val() == "B") ? 
    $("tr:nth-child(3)").show() : $("tr:nth-child(3)").hide(); 
    });});</script> 

Answer 1

iKnowKungFooの回答は非常に簡単だと思います（私の投票があります）。あなたのフォームがDjangoによって生成されたとあなたが気づいた。生成されたHTMLマークアップを簡単に修正できない場合は、ここで問題を解決するもう1つの解決方法を示します。

$(document).ready(function() { 
    var $aerialTr = $('#id_A').closest('tr').hide(); 
    var $groundSprayTr = $('#id_B').closest('tr').hide(); 

    $('#id_application_method').change(function() { 
     var selectedValue = $(this).val(); 

     if(selectedValue === 'A') { 
      $aerialTr.show(); 
      $groundSprayTr.hide(); 
     } else if (selectedValue === 'B') { 
      $aerialTr.hide(); 
      $groundSprayTr.show(); 
     } else { 
      $aerialTr.hide(); 
      $groundSprayTr.hide(); 
     } 
    }); 
}); 

は、ここでのテストにjsFiddleです：http://jsfiddle.net/willslab/n54cE/2/

それは、既存のマークアップで動作するはずです。これは、選択ボックスの現在のIDに基づいてtrを選択します。これらのIDを変更する場合は、それに応じてセレクタを変更する必要があります。

私はそれが助けてくれることを願っています！

編集：iKnowKungFooからインスピレーションを得た別の「ハイブリッド」アプローチがあります。彼の解決策は非常にエレガントなので、私はそれを私のものと組み合わせました。これはHTMLやCSSに変更を加えることなく動作します。

$(document).ready(function() { 
    $('#id_A').closest('tr').addClass('method_options').hide(); 
    $('#id_B').closest('tr').addClass('method_options').hide(); 

    $('#id_application_method').change(function() { 
     $('tr.method_options').hide(); 
     $('#id_' + $(this).val()).closest('tr').show(); 
    }); 
}); 

jsFiddleリンク：http://jsfiddle.net/willslab/6ASJu/3/

Answer 2

あなたの質問には、右のアイデアを説明します。それらを利用するには、HTMLを構造化するだけです。

JSFiddleは、ここに掲載：http://jsfiddle.net/iknowkungfoo/TKamw/

HTML - 私はSELECTプライマリの値と一致し、各TRにIDやクラスを追加しました： - ：
デフォルトでは、これらのTRを隠す

<div class="articles"> 
    <form method="get" action="_output.html"> 
     <table align="center"> 
      <tr> 
       <th><label for="id_application_method">Application method:</label></th> 
       <td><select name="application_method" id="id_application_method"> 
       <option value="">Pick first</option> 
       <option value="A">Aerial</option> 
       <option value="B">Ground</option> 
       </select></td> 
      </tr> 
      <tr id="tr_A" class="method_options"> 
       <th><label for="id_A">Aerial Size Dist:</label></th> 
       <td><select name="aerial_size_dist" id="id_A"> 
       <option value="A1" selected="selected">A1</option> 
       <option value="A2">A2</option> 
       </select></td> 
      </tr> 
      <tr id="tr_B" class="method_options"> 
       <th><label for="id_B">Ground spray type:</label></th> 
       <td><select name="ground_spray_type" id="id_B"> 
       <option value="B1" selected="selected">B1</option> 
       <option value="B2">B2</option> 
       </select></td> 
      </tr> 
     </table> 
    </form> 
</div>

CSSをtr.method_options { display: none; }​

のJavaScript/jQueryの - 主な変更を選択すると、「method_options」のクラスにすべてのTRを非表示にします。次に、プライマリSELECTで選択したオプションの値と一致するIDを持つTRを見つけて表示します。一致するものがなければ何も表示されません。

$(document).ready(function(){ 

    $('#id_application_method').on('change', function() {   

     $('tr.method_options').hide(); 
     $('#tr_' + $(this).val()).show(); 

    }); 

});