Check each <select> for values
<p>I have an list of checkout items in and unordered list with  dropdowns in each:</p>

<pre><code>&lt;li class="item"&gt;
  &lt;select name="item-custom&gt;
    &lt;option value="" selected&gt;&lt;/option&gt;
    &lt;option value="Red"&gt;Red&lt;/option&gt;
    &lt;option value="Blue"&gt;Blue&lt;/option&gt;
  &lt;/select&gt;
&lt;/li&gt;
&lt;li class="item"&gt;
  &lt;select name="item-custom&gt;
    &lt;option value="" selected&gt;&lt;/option&gt;
    &lt;option value="Red"&gt;Red&lt;/option&gt;
    &lt;option value="Blue"&gt;Blue&lt;/option&gt;
  &lt;/select&gt;
&lt;/li&gt;
</code></pre>

<p>...</p>

<p>I'm trying to check each <code>li.item select</code> and see if it has a value, and if not append an error inside of the .item:</p>

<pre><code>if( $('.item select').val() == '') {
  $($(this).closest('li')).append('&lt;div class="error"&gt;Custom is required.&lt;/div&gt;');
}
</code></pre>

<p>It seems to only pick up if the first <code>li.item select</code> is empty, and not the entire list.</p>
