Проверять каждый выпадающий список (выбрать список), связанный с продуктом

Question

У нас есть таблица с записью продукта в каждой строке. С каждым продуктом может быть связано от нуля до 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 пример . Веселая проблема, чтобы решить. Благодарю. :)

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

Answer 2

Джимми победил меня, но я сделал свою собственную версию в jsBin. Возможно, не так чисто, но может помочь:)

http://jsbin.com/ororen