jquery - 验证与产品相关的每个下拉列表(选择列表)

Question

我们有一个表，每行都有一个产品记录。每个产品可能有 0 到 6 个与其关联的下拉菜单(我们称之为选项组)。如果客户输入的数量大于零，我需要确保他们已从每个下拉列表中进行选择(如果该产品有下拉列表)。有任何想法吗？这是一个示例表，然后是我的 jquery 代码。

<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

工作中jsFiddle.net example 。有趣的问题需要解决。谢谢。 :)

<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!');
            }
        });
    }
});