使 div 出现在动态选项选择上

Posted 2023-05-09

【中文标题】使 div 出现在动态选项选择上

【英文标题】：Make div appear on dynamic option select

【发布时间】：2011-09-03 01:06:06

【问题描述】：

我有一个 SELECT 输入，它通过数据库获取所有选项。在选择输入下方，为选择中的每个选项创建了 div。我希望用户从下拉列表中选择一个选项并显示下面的 div。所以基本上下拉菜单是运动，如果他们做出选择，隐藏在下面的运动 div 将加载，并且该 div 将包含所有运动位置

 <select name="sport" id="select">
    <?
    foreach ($getSports as $row) 
        echo '<option onClick="toggle'.$row['1'].'()" onLoad="toggle'.$row['1'].'()" value="' . $row['0'] . '">' . $row['1'] . '</option>';
    
    ?>

                </select>
            </label>
           <?
    foreach ($getSports as $row) 
        echo '<div id="position' . $row['1'].'" style="margin-top: 5px;display:none;">Positions:' . $row['1'].'';
        $sport = $row['0'];
            $getPositions = $model->getPositions($sport);
            foreach ($getPositions as $row2) 
                echo '<label style="float:right">'.$row2['1'].'</label>';
               echo '<input type="checkbox" name="'.$row2['1'].'" value="'.$row2['0'].'">';
            

        echo '</div>';
    
    ?>

【参考方案1】：

像这样修改你的代码怎么样？似乎更语义化：

    <select name="sport" id="select">
    <? foreach ($getSports as $row) 
        echo '<option data-row-id="'.$row['1'].'" value="'.$row['0'].'">'.$row['1'].'</option>';
     ?>
    </select>
</label>

<? foreach ($getSports as $row) 
    echo '<div data-position="'.$row['1'].'" style="margin-top:5px;display:none;">Positions:' . $row['1'].'';
        $sport = $row['0'];
        $getPositions = $model->getPositions($sport);
        foreach ($getPositions as $row2) 
            echo '<label style="float:right">'.$row2['1'].'</label>';
            echo '<input type="checkbox" name="'.$row2['1'].'" value="'.$row2['0'].'">';
        

    echo '</div>';
?>


<script>
$(function() //create the binding once the document is ready
    $('#select').change(function() 
        var select = $(this);
        var selectedOption = select.find(':selected');
        var position = selectedOption.attr('data-row-id');
        var divContext = $('[data-position="'+position+'"]');

        $('[data-position]').not(divContext).hide();
        divContext.show();
    );
);
</script>

【讨论】：

选项里应该有onClick还是onLoad？我试过你的代码，没有任何反应，我很好奇它是如何触发的

将选择更改为其他选项后，代码应该会触发。根据包含脚本的位置，您可能需要将其放置在文档就绪函数中，以便在 DOM 元素可用时进行绑定。我将更新代码并将其放入准备好的文档中，以便您查看它是如何使用的。

这也取决于你使用的jQuery版本；你用的是什么版本？

啊，好的。我会很快改变一些东西。

我不得不将 id 从 select 更改为 sport，但效果很好！我不知道你为我节省了多少时间！

【参考方案2】：

如果您想只显示选定的运动，我建议这样做。

(1) 向包含体育信息的 div 添加一个类 - 例如。 class="sportsHolder"

(2)改变这部分

onClick="toggle'.$row['1'].'()" onLoad="toggle'.$row['1'].'()"

到

onClick="toggle('.$row['1'].');" onLoad="toggle('.$row['1'].');"

(3) 创建函数

<script type="text/javascript">
    function toggle(whichPos) 
        $(".sportsHolder").hide();
        $("#position" + whichPos).show();
    
</script>

至少我会那样做。