Show/Hide Select Option for selected radio buttons

Question

I have a 2 radio buttons and an option select dropdown that need to be selected by the user.

The user must select a header, logo, and option for each.

I have the select options hidden on page load then showing for the user selected radio button while the others remain hidden. My problem is that if the user clicks on "header" radio button but then decides to change to another "header" it works fine, but when clicking to a "logo" radio button from a "header" button, it hides the select option for the "header" that it was switched from.

For example: I want the user to click the "header" radio button which will then show a select option for it. Then if the user decides to click another "header" button the select option will move to the new selected "header". If the user then clicks on a "logo" button then a select option will show for the selected "logo" button without hiding the select option for the previously selected "header"

I apologize if this is confusing, but I am trying to explain the best way possible.

Thanks!

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

Answer 1

Try this at your code in the Fiddle:

$(".header, .logo").on("click",function(){

var relatedSelect2 = $(this).parent('.parent').children('.test');
$('.test').hide();
    $('.parent').each(function(index){
          $(this).children('input:checked').parent('.parent').children('.test').show();
    });
relatedSelect2.show();

});

This will not hide the select if the header radio is checked, even if a logo radio is checked in another row.