到目前为止我得到了什么：JSFIDDLE
我想要的是：
<select>未在其中选择<select>，则提交表单<select>，则将“无效”类添加到同一行中的其他2个选项这是HTML，js包含在上面的小提琴链接中：
<form id="productOptions" name="product-options">
<div class="selects s1">
<select name="selectss1" id="size1" class="product-select-options-size">
<option>-Size</option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>X-large</option>
</select>
<select name="selectsc1" id="color1" class="product-select-options-color">
<option>-Color</option>
<option>Green</option>
<option>Pink</option>
<option>White</option>
<option>Yellow</option>
</select>
<select name="selectsq1" id="qty1" class="product-select-options-qty">
<option>-QTY</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="selects s2">
<select name="selectss2" id="size2" class="product-select-options-size">
<option>-Size</option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>X-large</option>
</select>
<select name="selectsc2" id="color2" class="product-select-options-color">
<option>-Color</option>
<option>Green</option>
<option>Pink</option>
<option>White</option>
<option>Yellow</option>
</select>
<select name="selectsq2" id="qty2" class="product-select-options-qty">
<option>-QTY</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="selects s3">
<select name="selectss3" id="size3" class="product-select-options-size">
<option>-Size</option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>X-large</option>
</select>
<select name="selectsc3" id="color3" class="product-select-options-color">
<option>-Color</option>
<option>Green</option>
<option>Pink</option>
<option>White</option>
<option>Yellow</option>
</select>
<select name="selectsq3" id="qty3" class="product-select-options-qty">
<option>-QTY</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<p><a href="#" class="add-more">+ Add more at one time</a></p>
<!-- End select options -->
<input type="image" name="product-options" src="/media/blackheart/images/blackheart/add-to-cart.png" />
</form>
请建议
答案 0 :(得分：0)
你发布了一个非常模糊的问题。例如，您没有说明必须添加/删除哪个“无效”类。我想这是'提交'。
你也提供了4个条件，＃1,2,4个是冗余的，因为它们在某种程度上是互斥的。即如果为“如果未在行中选择”添加“无效”类，那么如果选择行中的3个选项，删除此类的意义是什么？？如果选择了，则必须删除此类。同样，＃4条件基本上与＃1相同。
你的js-code工作得很好，你只需添加几行来操作css-classes 注意：我没有使用jsfiddle，我在真正的浏览器（包括IE7）中检查了这段代码并且它有效，而它没有在jsfiddle。
$(function(){
$('#frm_productOrder').on('submit', function(e){
e.preventDefault();
var f=$(this);
var invalid=false, selected=0;
$('.selects').each(function(){
var row=$(this);
var items=0;
$('select', row).each(function(){
var t=$(this);
var selectedIndex=t.prop("selectedIndex");
if(selectedIndex)
{
items++;
t.removeClass('invalid'); //this line was added
}
else t.addClass('invalid'); //this line was added
});
if(items==3) selected++;
if(items>0 && items<3) invalid=true;
items=0;
});
if(selected>0 && !invalid) f[0].submit();
else alert('Please fill up the form correctly');
});
});
答案 1 :(得分：0)
这是我想要的解决方案，感谢所有帮助：
<script type="text/javascript">
$(function(){
$('#formid').on('submit', function(e){
e.preventDefault();
var f=$(this);
var invalid=false, selected=0;
$('.selects').each(function(){
var row=$(this);
var items=0;
$('select', row).each(function(){
var t=$(this);
var selectedIndex=t.prop("selectedIndex");
if(selectedIndex)
{
items++;
t.removeClass('invalid'); //this line was added
}
else t.addClass('invalid');
$("#formid").find(".invalid").removeClass("invalid").filter(':lt(1)').addClass("invalid");
//this line was added
});
if(items==3) selected++;
if(items>0 && items<3) invalid=true;
items=0;
});
if(selected>0 && !invalid) f[0].submit();
else {
/*alert('Please fill up the form correctly');*/
$(".selects-msg").slideDown();
}
});
});