显示/隐藏选择所选单选按钮的选项

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

Answer 1

在你的小提琴代码中试试这个：

$(".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();

});

如果选中了标题广播，即使在另一行中选中了徽标广播，也不会隐藏选择。