javascript - 選択したラジオ ボタンの選択オプションを表示/非表示

Question

ユーザーが選択する必要がある2つのラジオボタンとオプション選択ドロップダウンがあります。

ユーザーは、それぞれのヘッダー、ロゴ、およびオプションを選択する必要があります。

ページの読み込み時に選択オプションを非表示にしてから、ユーザーが選択したラジオ ボタンに表示し、他のオプションは非表示のままにします。私の問題は、ユーザーが「ヘッダー」ラジオボタンをクリックしてから別の「ヘッダー」に変更することを決定した場合、正常に機能しますが、「ヘッダー」ボタンから「ロゴ」ラジオボタンをクリックすると、選択オプションが非表示になることです切り替え元の「ヘッダー」の場合。

例：ユーザーに「ヘッダー」ラジオボタンをクリックしてもらい、その選択オプションが表示されるようにします。次に、ユーザーが別の「ヘッダー」ボタンをクリックすることにした場合、選択オプションは新しく選択された「ヘッダー」に移動します。ユーザーが「ロゴ」ボタンをクリックすると、以前に選択した「ヘッダー」の選択オプションを非表示にすることなく、選択した「ロゴ」ボタンの選択オプションが表示されます。

これが混乱を招く場合は申し訳ありませんが、可能な限り最善の方法を説明しようとしています.

ありがとう！

JSFiddle

Javascript:

<script type="text/javascript">

$().ready(function(){

$('.test').hide();

$('input.myClass').prettyCheckable();
$(".prettyradio").on("click",function(){

var relatedSelect2 = $(this).parent('.parent').find('.test');

$('.test').hide();
relatedSelect2.show();

});


});

</script>

PHP:

     echo "<div class='container'>
    <div class='row'>";

    echo "<form id='main' action='' method='post'>";

        for ($i=0; $i<$file_count; $i++)
    {

    echo "<div class='col-xs-4' style='height:auto; width:auto;'>
        <a href='#' class='thumbnail' style='height:75px; width:170px;'>
        <img src='images/$file_list[$i]' alt='...' style='width: 100%; max-height: 100%'/>
        </a>
        <div class='parent'>
    <input type='radio' class='header myClass click' value='images2/$file_list[$i]' id='header' name='header' data-label='Header' />
    <input type='radio' class='logo myClass click' value='images2/$file_list[$i]' id='logo' name='logo' data-label='Logo'/><br>";




    $test = mysql_query("SELECT id, title FROM tmpl2");


    echo "<center><div class='test'><select class='image_select' id='image_option' name='image_option".$i."[]' multiple='multiple'>";

    while ($row = mysql_fetch_assoc($test))
    {
    echo "<option value='".$row[id]."'>$row[title]</option>";
    }

    echo "</select></div></center><br><br></div></div>";


    }

    echo "</div><input type='submit' id='submit' name='submit' class='btn btn-primary btn-block btn-sm'></form></div>";