StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Hiding/showing the label and the field is easy. Put the field in the label (which associates them), give the label <code>style="display: none"</code>, and give it an ID. E.g.:</p> <pre><code><label id='thirdField' style='display: none'>Choose Sub Sub Name: <input type="text" name="sub-sub-name" /></label> </code></pre> <p>Then you can show it via <a href="http://api.jquery.com/show/" rel="nofollow noreferrer"><code>show</code></a></p> <pre><code>$("#thirdField").show(); </code></pre> <p>...and hide it via <a href="http://api.jquery.com/hide/" rel="nofollow noreferrer"><code>hide</code></a>:</p> <pre><code>$("#thirdField").hide(); </code></pre> <p>...or (and it's not hyper-clear from the docs, but if you get to the bottom of the page you'll find it) you can toggle based on a boolean value using <a href="http://api.jquery.com/toggle/" rel="nofollow noreferrer"><code>toggle</code></a>:</p> <pre><code>$("#thirdField").toggle(true); // true to show, false to hide </code></pre> <p>So now what you need is a trigger that fires when the third option in the select is chosen. There's the <code>change</code> event, but it doesn't fire until the focus leaves the select field. (jQuery normalizes that; otherwise, when it fired would be browser-dependent.) You could try <code>click</code> on the option itself, but I don't know if it's reliable when navigation is via the keyboard.</p> <p>To be proactive (which is particularly important if the field you're showing immediately follows the select box in the tab order!), I tend to use a timer to watch for changes (an idea I got from the Prototype guys, they have a whole class for this):</p> <pre><code>var selectField = $("#mySelectField"); var thirdField = $("#thirdField"); var handle = setInterval(watchForChange, 250); // Every quarter second function watchForChange() { thirdField.toggle(selectField.val() === "sub-sub"); } </code></pre> <p>(There I assume you've given the id <code>mySelectField</code> to your select field.) When you don't need to do this anymore, you want to cancel the interval:</p> <pre><code>clearInterval(handle); handle = 0; </code></pre> <p>Naturally you wouldn't do all of the above at the top level, that would itnroduce a bunch of global variables. You'd put it inside a scoping function.</p>

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