Databases
StackOverflow2013
Postsdbo
POhow to hide selectbox when no options
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to hide selectbox when no options
    text
    copied!<p>How can I hide a selectbox when there a less then two options present? I've made a small script that automatically adds options to a selectbox. This works excellent. Problem however is that the next selectbox is showed even when there are no options to display. How to fix that? I tried it myself with the piece of code all the way down between /////// </p> <p>HTML</p> <pre><code> &lt;div class="zoeken-select"&gt; &lt;div class="zoeken-value" id="cat1"&gt;Selecteer je school/opleiding&lt;/div&gt; &lt;div class="zoeken-handle"&gt;&lt;/div&gt; &lt;select id="school" class="gui-validate"&gt; &lt;option&gt;Selecteer je school/opleiding&lt;/option&gt; &lt;option value="566342"&gt;Riemen&lt;/option&gt; &lt;option value="566347"&gt;Sjaals&lt;/option&gt; &lt;option value="566348"&gt;Tassen&lt;/option&gt; &lt;option value="566341"&gt;Kleding&lt;/option&gt; &lt;option value="566345"&gt;Sale!&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="zoeken-select course"&gt; &lt;div class="zoeken-value" id="cat2"&gt;Selecteer je sector/locatie&lt;/div&gt; &lt;div class="zoeken-handle"&gt;&lt;/div&gt; &lt;select id="course" class="gui-validate"&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="zoeken-select list" style="display:none;"&gt; &lt;div class="zoeken-value" id="cat3"&gt;&lt;/div&gt; &lt;div class="zoeken-handle"&gt;&lt;/div&gt; &lt;select id="list" class="gui-validate"&gt; &lt;/select&gt; &lt;/div&gt; etc.... </code></pre> <p>JQUERY</p> <pre><code>// opleiding var courseSelection = { "566342": [ { value: "566343", text: "Dames riemen" },{ value: "566344", text: "Heren riemen" },], "566347": [ ], "566348": [ ], "566341": [ ], "566345": [ { value: "566346", text: "Tassen" },], }; $("select#school").change(function(){ $("select#course").html('&lt;option value=""&gt;Kies je opleiding&lt;/option&gt;'); $("select#list").html('&lt;option value=""&gt;Kies een lijst&lt;/option&gt;'); $("#cat1").html($("#school option:selected").text()); $("#cat2").html('Kies je opleiding'); $("#cat3").html('Kies een lijst'); $("#cat4").html('Kies '); $("#cat5").html('Kies lijst'); var options = '', courses = courseSelection[$(this).val()]; $('select#course').empty(); options += '&lt;option value=""&gt;Kies je opleiding&lt;/option&gt;'; $.each(courses, function() { options += '&lt;option value="' + this.value + '"&gt;' + this.text + '&lt;/option&gt;'; }); $('select#course').append(options); $('.zoeken-select.course').fadeIn(300); }); // end opleiding // lijst var listSelection = { "566343": [ ], "566344": [ { value: "707274", text: "tyesr" },], "566346": [ ], }; $("select#course").change(function(){ $("#cat2").html($("#course option:selected").text()); var options = ''; lists = listSelection[$(this).val()]; $('select#list').empty(); options += '&lt;option value=""&gt;Kies je lijst&lt;/option&gt;'; $.each(lists, function() { options += '&lt;option value="' + this.value + '"&gt;' + this.text + '&lt;/option&gt;'; }); $('select#list').append(options); /////////////////////////////////////////// if ( $("select#list option[value='" + options + "']").val() &lt;= 2) { $('.zoeken-select.list').hide(); } else { $('.zoeken-select.list').show(); } ////////////////////////////////////////// }); etc... </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