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

【问题标题】：Make div appear on dynamic option select使 div 出现在动态选项选择上
【发布时间】：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>';
    }
    ?>

【问题讨论】：

标签： php javascript jquery

【解决方案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>

至少我会那样做。

【讨论】：