Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I hope the following work for your requirement. Having 3 child dropdowns (no divs) 1. --Select--, 2. Jan-Dec 3.Other options </p> <pre><code>$().ready(function () { var selectedOnLoad = $('#dateselector_parent').val(); setChild(selectedOnLoad); $('#dateselector_parent').change(function () { var selectedValue = $('#dateselector_parent').val(); setChild(selectedValue); }); }); function setChild(value){ //Have your three child selector names as follows in your markup as well and assuming they are not in divs var arr = [ "dateselector_child_", "dateselector_child_1", "dateselector_child_2"]; jQuery.each(arr, function() { if(this == "dateselector_child_" + value){ $("#" + this).show(); }else{ $("#" + this).hide(); } }); } </code></pre> <p><strong>UPDATE:</strong> Adding markup for the above script</p> <pre><code>&lt;select name="dateselector_parent" id="dateselector_parent" tabindex="1"&gt; &lt;option value=""&gt;--Select Date--&lt;/option&gt; &lt;option value="1"&gt;2012&lt;/option&gt; &lt;option value="1"&gt;2011&lt;/option&gt; &lt;option value="1"&gt;2010&lt;/option&gt; &lt;option value="2"&gt;Predefined Dates&lt;/option&gt; &lt;/select&gt; &lt;select name="dateselector_child_" id="dateselector_child_" tabindex="2"&gt; &lt;option value=""&gt;--Select Date--&lt;/option&gt; &lt;/select&gt; &lt;select name="dateselector_child_1" id="dateselector_child_1" tabindex="2"&gt; &lt;option value=""&gt;--Select Date--&lt;/option&gt; &lt;option value="1"&gt;January&lt;/option&gt; &lt;option value="1"&gt;February&lt;/option&gt; &lt;option value="1"&gt;March&lt;/option&gt; &lt;option value="1"&gt;April&lt;/option&gt; &lt;option value="1"&gt;May&lt;/option&gt; &lt;option value="1"&gt;June&lt;/option&gt; &lt;option value="1"&gt;July&lt;/option&gt; &lt;option value="1"&gt;August&lt;/option&gt; &lt;option value="1"&gt;September&lt;/option&gt; &lt;option value="1"&gt;October&lt;/option&gt; &lt;option value="1"&gt;November&lt;/option&gt; &lt;option value="1"&gt;December&lt;/option&gt; &lt;/select&gt; &lt;select name="dateselector_child_2" id="dateselector_child_2" tabindex="2"&gt; &lt;option value=""&gt;--Select Date--&lt;/option&gt; &lt;option value="2"&gt;Current Month&lt;/option&gt; &lt;option value="2"&gt;Month to Date&lt;/option&gt; &lt;option value="2"&gt;Last 7 Days&lt;/option&gt; &lt;/select&gt; </code></pre> <p>Check the <strong>setChild(value)</strong> function. Parent's selected value is passing to that function when page is ready (just after loading) and also when user change the selection. Parent's selected value could be "","1","2". Next the foreach loop finds the name of the child that needs to show and others are hidden. if user select ---Select--- option of the parent then that function will show "dateselector_child_" and others two hidden.</p> <p>Hope it's clear now....</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