我们有一个表格,每行都有一个产品记录。每个产品可能有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"> </td>
<td valign="top"><strong>Arctic Armor Suit Black Suit </strong>
<div id="pd-optionsContainer_1" style="margin-bottom:20px;">Jacket Size:
<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>
Bib Size:
<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>
Glove Size:
<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>
</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"> </td>
<td valign="top">Arctic Armor Gloves
<div id="pd-optionsContainer_2" style="margin-bottom:20px;">Size:
<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>
</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());
//}
});
}
});
答案 0 :(得分:2)
工作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"> </td>
<td valign="top"><strong>Arctic Armor Suit Black Suit </strong>
<div id="pd-optionsContainer_1" style="margin-bottom:20px;">Jacket Size:
<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>
Bib Size:
<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>
Glove Size:
<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>
</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"> </td>
<td valign="top">Arctic Armor Gloves
<div id="pd-optionsContainer_2" style="margin-bottom:20px;">Size:
<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>
</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!');
}
});
}
});
答案 1 :(得分:1)
吉米打败了我 - 但我在jsBin做了我自己的版本。也许不是那么干净但可能会有所帮助:)。