StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Using the selector <code>".drop option"</code> will get <strong>all</strong> the <code>option</code> elements <em>under</em> (not necessarily direct children) of an element with class <code>".drop"</code>.</p> <p>Note that this does not only is valid for select element but also with this:</p> <pre><code><div class="drop"> <select> <option>Item 1</option> <option>Item 2</option> <option>Item 3</option> </select> </div> $('.drop option').length // 3 </code></pre> <p>To ensure your <code><option></code> elements children of <code><select class="drop"></code>, use the children selector <code>></code>:</p> <pre><code>$('.drop > option'); </code></pre> <hr> <p>To get separately the amount of options for each select, you would select the <code><select></code> first and then count for each of then. You can do something like:</p> <pre><code>var optionsArr = $('select.drop').map(function() { return $(this).find('option:not(:disabled)').length; }).toArray(); </code></pre> <p>This will return an array with the different amounts: <code>[1, 3]</code></p> <p><strong><a href="http://jsfiddle.net/didierg/JUqJd/" rel="noreferrer">DEMO</a></strong></p> <hr> <p>To add a div with the the text "3 date(s) available", do this:</p> <pre><code>$('select.drop').each(function() { // the current select.drop var $this = $(this); // create a div with the text you want $('<div>' + $this.find('option:not(:disabled)').length + ' date(s) available</div>') // append it after the current select.drop .insertAfter($this); }); </code></pre> <p>///////////////////////</p> <p>Ok, nearly there! Thanks again for your time on this...</p> <p>I have put the code in and it is doing what I want it to do, however due to the fact that it is all in an Accordion, it loops each time for each accordion item. See screenshot (excuse styling):</p> <p><img src="https://i.stack.imgur.com/xxIYv.png" alt="Screenshot"></p> <p>I just need it to now only loop for the select drop in that accordion, rather than for each one.</p> <p>Also, in my Select fro down, I have the first Option as "Disabled" as part of the validation so that the user has to select an item before continuing, such as:</p> <pre><code><option disabled="disabled"></option> </code></pre> <p>The javascript is also counting this. So is there any way we can put a -1 in there to the result, or is there a better way of doing this that I am missing?</p> <p>Thanks again...</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