Question

We have a table that has a product record on each row. Each product may have from zero to 6 dropdowns (we call them option groups) associated with it. If a customer enters a quantity greater than zero I need to make sure they have made a selection from each dropdown (if there is a dropdown for that product). Any ideas? Here’s a sample table and then my jquery code.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="GroupRow">
  <td valign="top"><strong>
    <input name="ItemQty1" type="text" id="ItemQty1" class="ItemQuantity" value="1" size="4" maxlength="3" style="width:20px;" />
    </strong></td>
  <td valign="top">&nbsp;</td>
  <td valign="top"><strong>Arctic Armor Suit Black Suit </strong>
    <div id="pd-optionsContainer_1" style="margin-bottom:20px;">Jacket Size:&nbsp;
      <select name="OptionID_1" id="ParentID_1" class="OptionsSelected">
        <option value="">Select</option>
        <option value="11053">Medium</option>
        <option value="10543">Large</option>
        <option value="13751">X-Large</option>
        <option value="7300">2X-Large</option>
        <option value="7696">3X-Large</option>
      </select>
      &nbsp;&nbsp;

      Bib Size:&nbsp;
      <select name="OptionID_2" id="ParentID_2" class="OptionsSelected">
        <option value="">Select</option>
        <option value="11052">Medium</option>
        <option value="10542">Large</option>
        <option value="13750">X-Large</option>
        <option value="7310">2X-Large</option>
        <option value="7703">3X-Large</option>
      </select>
      &nbsp;&nbsp;

      Glove Size:&nbsp;
      <select name="OptionID_3" id="ParentID_3" class="OptionsSelected">
        <option value="">Select</option>
        <option value="11054">Medium</option>
        <option value="10517">Large</option>
        <option value="13737">X-Large</option>
        <option value="7295">2X-Large</option>
      </select>
      &nbsp;&nbsp; </div></td>
  <td valign="top"><strong>$329.99</strong></td>
</tr>
<tr class="GroupRow">
  <td valign="top"><input name="ItemQty2" type="text" id="ItemQty2" class="ItemQuantity" value="0" size="4" maxlength="3" style="width:20px;" /></td>
  <td valign="top">&nbsp;</td>
  <td valign="top">Arctic Armor Gloves
    <div id="pd-optionsContainer_2" style="margin-bottom:20px;">Size:&nbsp;
      <select name="OptionID_4" id="ParentID_4" class="OptionsSelected">
        <option value="">Select</option>
        <option value="11056">Medium</option>
        <option value="10519">Large</option>
        <option value="13739">X-Large</option>
        <option value="7297">2X-Large</option>
      </select>
      &nbsp;&nbsp; </div></td>
  <td valign="top">$29.99 </td>
</tr>
</table>



    $('tr.GroupRow input.ItemQuantity').each(function(index) {
        if ($(this).val() > 0){
            alert(index + ': ' + $(this).val());
            $('tr.GroupRow').find('select.OptionsSelected').each(function(index) {
                //if ($(this).val() > 0){
                    alert(index + ': ' + $(this).val());
                //}
            });
        }
    });

Answer 1

Working jsFiddle.net example. Fun problem to solve. Thanks. 🙂

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="GroupRow">
  <td valign="top"><strong>
    <input name="ItemQty1" type="text" id="ItemQty1" class="ItemQuantity" value="1" size="4" maxlength="3" style="width:20px;" />
    </strong></td>
  <td valign="top">&nbsp;</td>
  <td valign="top"><strong>Arctic Armor Suit Black Suit </strong>
    <div id="pd-optionsContainer_1" style="margin-bottom:20px;">Jacket Size:&nbsp;
      <select name="OptionID_1" id="ParentID_1" class="OptionsSelected">
        <option value="">Select</option>
        <option value="11053">Medium</option>
        <option value="10543" selected>Large</option>
        <option value="13751">X-Large</option>
        <option value="7300">2X-Large</option>
        <option value="7696">3X-Large</option>
      </select>
      &nbsp;&nbsp;

      Bib Size:&nbsp;
      <select name="OptionID_2" id="ParentID_2" class="OptionsSelected">
        <option value="">Select</option>
        <option value="11052">Medium</option>
        <option value="10542">Large</option>
        <option value="13750">X-Large</option>
        <option value="7310">2X-Large</option>
        <option value="7703">3X-Large</option>
      </select>
      &nbsp;&nbsp;

  Glove Size:&nbsp;
  <select name="OptionID_3" id="ParentID_3" class="OptionsSelected">
    <option value="">Select</option>
    <option value="11054">Medium</option>
    <option value="10517">Large</option>
    <option value="13737">X-Large</option>
    <option value="7295">2X-Large</option>
  </select>
  &nbsp;&nbsp; </div></td>
  <td valign="top"><strong>$329.99</strong></td>
</tr>
<tr class="GroupRow">
  <td valign="top"><input name="ItemQty2" type="text" id="ItemQty2" class="ItemQuantity" value="0" size="4" maxlength="3" style="width:20px;" /></td>
  <td valign="top">&nbsp;</td>
  <td valign="top">Arctic Armor Gloves
    <div id="pd-optionsContainer_2" style="margin-bottom:20px;">Size:&nbsp;
      <select name="OptionID_4" id="ParentID_4" class="OptionsSelected">
        <option value="">Select</option>
        <option value="11056">Medium</option>
        <option value="10519">Large</option>
        <option value="13739">X-Large</option>
        <option value="7297">2X-Large</option>
      </select>
      &nbsp;&nbsp; </div></td>
  <td valign="top">$29.99 </td>
</tr>
</table>

$('tr.GroupRow').each(function(index, element) {
    if($(element).find('input').val() > 0) {
        alert('row ' + index + ' has a quantity greater than zero');
        $('select', element).each(function(index, element) {
            if($('option:selected', element).val() === '') {
               alert('option ' + index + ' is not selected!');
            }
        });
    }
});