Javascript 使用jquery修改多重选择验证

到目前为止，我得到的是：

我想要的是：

如果未在

行中选择该类，则为该类添加“invalid”

如果选择了行中的3个选项，则删除此类

如果选择了一行中的所有

，则提交表单

如果只选择了一个

，则将“无效”类添加到同一行中的其他两个选择中

这是HTML，js包含在上面的fiddle链接中：

 <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>

-大小
小的
中等
大的
大型
-颜色
绿色
粉红色
白色
黄色的
-数量
1.
2.
3.
4.
-大小
小的
中等
大的
大型
-颜色
绿色
粉红色
白色
黄色的
-数量
1.
2.
3.
4.
-大小
小的
中等
大的
大型
-颜色
绿色
粉红色
白色
黄色的
-数量
1.
2.
3.
4.

---

请告知

您发布了一个非常模糊的问题。例如，您没有说明必须添加/删除“无效”类的事件。我想这是“提交”

你也给出了4个条件，#1，2，4个条件是多余的，因为它们在某种程度上是相互排斥的。也就是说，如果您为该行中未选择的类添加类“无效”，那么如果该行中的3个选择被选择，则删除该类的意义是什么？如果选择了该类，则只需删除该类即可。同样，4条件本质上与1相同

js代码运行良好，只需添加几行代码即可操作css类 注意：我没有使用JSFIDLE，我在RealBrowser（包括IE7）中检查了这段代码，它工作正常，而在JSFIDLE中没有

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

$（函数（）{
$（'frm#U productOrder'）。在（'submit'，函数（e）上{
e、 预防默认值（）；
var f=$（本）；
var invalid=false，selected=0；
$（'.selects'）。每个（函数（）{
var行=$（此）；
var项目=0；
$（'select'，行）。每个（函数（）{
var t=$（本）；
var selectedIndex=t.prop（“selectedIndex”）；
如果（已选择索引）
{
项目++；
t、 removeClass（'invalid'）；//已添加此行
}
else t.addClass（'invalid'）；//已添加此行
});
如果（项目==3）选择++；
如果（项>0&&items0&&！无效）f[0]。提交（）；
else alert（请正确填写表格）；
});
});

这是我想要的解决方案，感谢您的帮助：

<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();
        }

      });
    });

$（函数（）{
$（'#formid'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
var f=$（本）；
var invalid=false，selected=0；
$（'.selects'）。每个（函数（）{
var行=$（此）；
var项目=0；
$（'select'，行）。每个（函数（）{
var t=$（本）；
var selectedIndex=t.prop（“selectedIndex”）；
如果（已选择索引）
{
项目++；
t、 removeClass（'invalid'）；//已添加此行
}
else t.addClass（'invalid'）；
$（“#formid”）.find（“.invalid”）.removeClass（“invalid”）.filter（“：lt（1）”）.addClass（“invalid”）；
//增加了这一行
});
如果（项目==3）选择++；
如果（项>0&&items0&&！无效）f[0]。提交（）；
否则{
/*提醒（“请正确填写表格”）*/
$（“.selects msg”）.slideDown（）；
}
});
});

你能重写你第一段的句子吗？也许可以把它分成几步？@step#3：你不应该在更改后自动提交表单，尤其是当它是一个用于销售物品的表单时。我为你修改了一些格式。现在我清楚地知道你想要什么了