0

我有一个需要用户选择的 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>";

在此处输入图像描述

4

1 回答 1

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();

});

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

于 2013-10-30T22:59:47.323 回答