Question

更新：所以我将所有div放在一个表数据单元格下。现在，我在更改选择选项时获得了我想要的功能，但在页面加载时显示全部 div。我只是希望它在{html_options name="program" options=$programs selected=$sanction->Program}

下显示我的预选

$ sanction-＆gt;程序片段带来一串预先选择的程序。它最初选择选项集上的实际选项，但该值不对应。它只显示每个 div。

PREVIOUS：我试图隐藏我的div在jquery中显示一个div。当我从六个中选择我的一个选项时，div出现了，但你可以清楚地告诉他们在选择时他们是彼此之上的。当我做出一个选择并且只显示一个div时，我只想隐藏其他div。任何帮助将不胜感激。

这是我的代码

// JQUERY

        $("select[name=program]").change(function () {
            $("td#levelCheck div").hide();
            $("td#levelCheck div#" + $(this).val()).show();
        });

// HTML

    <table class="form" style="margin-top: 20px;">
            <tbody>
                <tr>
                    <th>Sanction Name</th>
                    <td><input type="text" name="name" size="40" maxlength="100" value="{$sanction->Name}" /></td>
                </tr>
                <tr>
                    <th style="vertical-align: top;">Select discipline type</th>
                    <td>{html_options name="program" options=$programs selected=$sanction->Program}</td>
                </tr>
                <tr id="trCheck">
                    <th></th>
                    <td id="levelCheck">
                        <div id="Rhythmic" style="width: 452px;">
                            {foreach from=$acroLevels item=level}
                                <label>
                                    <input type="checkbox" name="{$level->Code}" value="{$level->Description}" /> {$level->Description}
                                </label>
                            {/foreach}
                        </div>
                        <div id="Acro" style="width: 452px;">
                            {foreach from=$acroLevels item=level}
                                <label>
                                    <input type="checkbox" name="{$level->Code}" value="{$level->Description}" /> {$level->Description}
                                </label>
                            {/foreach}
                        </div>
                        <div id="Men" style="width: 452px;">
                            {foreach from=$mensLevels item=level}
                                <label>
                                    <input type="checkbox" name="{$level->Code}" value="{$level->Description}" /> {$level->Description}
                                </label>
                            {/foreach}
                        </div>
                        <div id="TT" style="width: 452px;">
                            {foreach from=$ttLevels item=level}
                                <label>
                                    <input type="checkbox" name="{$level->Code}" value="{$level->Description}" /> {$level->Description}
                                </label>
                            {/foreach}
                        </div>
                        <div id="Women" style="width: 452px;">
                            {foreach from=$womensLevels item=level}
                                <label>
                                    <input type="checkbox" name="{$level->Code}" value="{$level->Description}" /> {$level->Description}
                                </label>
                            {/foreach}
                        </div>
                        <div id="Group" style="display: none;">
                   </td>
                </tr>

Answer 1

您有多个具有相同ID的TD

<td id="levelCheck">

在这种情况下，jQuery会将使用#levelCheck的选择器仅应用于第一个匹配的元素，而不是像您期望的那样。您应该将其更改为使用类

<td class="levelCheck">

然后使用

$("td.levelCheck div")

Answer 2

扔掉那张丑陋的桌子。只需将所有div放在彼此之后，将显示设置为none。要显示的那个，将display设置为block，将所有其他设置为none。就是这样。

使用Jquery来改变div

2 个答案: