javascript - jQuery：ドロップダウンボックスの選択に基づいて要素を条件付きで表示

Question

関連するドロップダウンリストが2つあり、2番目のドロップダウンリストの内容は、最初のドロップダウンリストで行った選択によって異なります。たとえば、次のHTMLコードでは、最初に適用方法を選択します。適用方法としてAerialを選択した場合は、Aerialsizedistなどの追加の質問に答えます。それ以外の場合は、グラウンドスプレータイプに答える必要があります。

したがって、Webページが読み込まれると、2つの第2レベルのドロップダウンリスト（空中サイズの距離と地上スプレーの種類）が非表示になります。それらは、最初のもの（適用方法）で関連する選択が行われた場合にのみ表示されます。

この機能はjQuery（jQueryコードの下）で実現できます。しかし、私のアプローチはかなりばかげています。私の質問は：

1. シーケンスをカウントせずに行全体を選択する方法はありますか（nth-child（））？要素IDの選択に基づいて、行全体を選択できますか？たとえば、最初に$（'＃id_A'）を選択してから、選択範囲を行全体に展開できますか？

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

ありがとう！

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

<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 マークアップを変更するのが簡単でない場合は、問題に対する別の解決策を次に示します。

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