StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POUsing Jquery to change div
text
Body
copied!<p>UPDATE: So I put all the divs under one table data cell. Now I get the functionality that I want when changing the selection option, but it shows <strong>all</strong> the divs when the page loads up. I just want it to show my pre-selection under <code>{html_options name="program" options=$programs selected=$sanction->Program}</code></p> <p>The $sanction->Program piece brings in a string of what program is to be preselected. It selects the actual option on the option set initially, but the value is not corresponding. It just shows <strong>every</strong> div.</p> <p>PREVIOUS: I am trying to hide my divs in jquery while showing one div. When I select my one option from six..the div shows up, but you can clearly tell while going through the selections that they are on top of each other. I just want to hide the other divs when I make my one selection and just show that one div. Any help would be appreciated.</p> <p>Here is my code</p> <p>//JQUERY</p> <pre><code> $("select[name=program]").change(function () { $("td#levelCheck div").hide(); $("td#levelCheck div#" + $(this).val()).show(); }); </code></pre> <p>//HTML</p> <pre><code> <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> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload