Question

我有一个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>';
    }
    ?>

Answer 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>

Answer 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>

至少我会这样做。

使div显示在动态选项选择上

2 个答案: