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

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

 <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向保存体育信息的div添加一个类-例如class=sportholder

2更改此部分

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

到

3创建函数

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

---

至少我会这样做。

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

1向保存体育信息的div添加一个类-例如class=sportholder

2更改此部分

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

到

3创建函数

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

---

至少我会这样做。

这样修改代码怎么样？似乎更具语义：

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

---

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

    <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？我尝试了你的代码，但什么都没发生，我很好奇它是如何触发的。一旦你将select更改为其他选项，代码应该如何触发。根据包含脚本的位置，可能需要将其放在文档就绪函数中，以便在DOM元素可用时进行绑定。我将更新代码并将其放在一个准备好的文档中，这样您就可以看到它是如何使用的；你用的是什么版本？啊，好的。我会很快改变一些东西。我不得不将id从select更改为sport，但效果非常好！我不知道你帮我节省了多少时间！选项中应该有onClick还是onLoad？我尝试了你的代码，但什么都没发生，我很好奇它是如何触发的。一旦你将select更改为其他选项，代码应该如何触发。根据包含脚本的位置，可能需要将其放在文档就绪函数中，以便在DOM元素可用时进行绑定。我将更新代码并将其放在一个准备好的文档中，这样您就可以看到它是如何使用的；你用的是什么版本？啊，好的。我会很快改变一些东西。我不得不将id从select更改为sport，但效果非常好！我不知道你帮我节省了多少时间！