Databases
StackOverflow2013
Postsdbo
POJavaScript to display hidden layers depending on selection from JQuery Flexbox
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavaScript to display hidden layers depending on selection from JQuery Flexbox
    text
    copied!<p>What I have is a set of 3 Jquery flexbox combo boxes (dropdowns). The first one is visible, the other 2 are hidden. </p> <p>What I want is to have the selection from the first box determine which layer gets revealed for box 2, and in turn have the selection from box 2 reveal the appropriate layer for box 3. I then want the selection from box 3 to reveal a fourth layer - the 'results'.</p> <p>I need help figuring out a JavaScript function that will work with JQuery Flexbox, to reveal the appropriate divs. </p> <p>In the head tag:</p> <pre><code>function showlayer(layer){ var myLayer = document.getElementById(layer).style.display; if(myLayer == "none"){ document.getElementById(layer).style.display = "block"; } else { document.getElementById(layer).style.display = "none"; } } </code></pre> <p>This may or may not be a good way to start with the layer reveal script.</p> <pre><code>jQuery(function($) { //a flexbox with 3 different types of providers //each selection would reveal a different city list (box2) $('#ffb1').flexbox(providers, { watermark: 'Please choose a provider type', width: 260, autoCompleteFirstMatch: false onSelect: function change(){ $("div[id^='box_']").show() //this is the problem here, I think - how do I finish this off? }); $('#ffb2').flexbox(cities, { watermark: 'Choose your city', width: 260, }); $('#ffb3').flexbox(districts, { watermark: 'Choose your location', width: 260, }); }); </code></pre> <p>and markup:</p> <pre><code>&lt;div id="box_1"&gt; &lt;table class=demo&gt; &lt;tbody&gt; &lt;tr class=example&gt; &lt;td&gt;&lt;span&gt;Provider type&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=col&gt;&lt;b&gt;Please choose the type of provider you are seeking:&lt;/B&gt; &lt;div style="height: 18px"&gt;&lt;/div&gt; &lt;div id=ffb1&gt;&lt;/div&gt; &lt;div style="clear: both" id=ffb7-result&gt;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="box_2a" style="display:none;"&gt; &lt;table class=demo&gt; &lt;tbody&gt; &lt;tr class=example&gt; &lt;td&gt;&lt;span&gt;City list 1&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=col&gt;&lt;b&gt;Please select the city closest to you:&lt;/B&gt; &lt;div style="height: 18px"&gt;&lt;/div&gt; &lt;div id=ffb2&gt;&lt;/div&gt; &lt;div style="clear: both" id=ffb7-result&gt;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="box_2b" style="display:none;"&gt; &lt;table class=demo&gt; &lt;tbody&gt; &lt;tr class=example&gt; &lt;td&gt;&lt;span&gt;City list 2&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=col&gt;&lt;b&gt;Please select the city closest to you:&lt;/B&gt; &lt;div style="height: 18px"&gt;&lt;/div&gt; &lt;div id=ffb2&gt;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="box_2c" style="display:none;"&gt; &lt;table class=demo&gt; &lt;tbody&gt; &lt;tr class=example&gt; &lt;td&gt;&lt;span&gt;City list 3&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=col&gt;&lt;b&gt;Please select the city closest to you:&lt;/B&gt; &lt;div style="height: 18px"&gt;&lt;/div&gt; &lt;div id=ffb2&gt;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="box_3" style="display:none;"&gt; &lt;table class=demo&gt; &lt;tbody&gt; &lt;tr class=example&gt; &lt;td&gt;&lt;span&gt;City Districts&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=col&gt;&lt;b&gt;Please choose a location:&lt;/B&gt; &lt;div style="height: 18px"&gt;&lt;/div&gt; &lt;div id=ffb2&gt;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="box_4" style="display:none;"&gt; &lt;table class=demo&gt; &lt;!-- results table would go here --&gt; &lt;/table&gt; &lt;/div&gt; </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