jquery - 两个不同的选择具有相同的选项，然后动画溢出的 div 或错误消息

Question

编辑：哦，好吧，现在我设法让它正常工作。但是，如果用户在收到错误消息后选择了正确的选项，我需要将错误消息隐藏。

这是我正在处理的 html/jquery

 <form>
 <select>
     <option>Please Select Your Value</option>
     <option>Pick this value 1</option>
 </select>
 <div class="error">Please select your value</div>

 <select>
     <option>Please Select Your Value</option>
     <option>Pick this value 2</option>
 </select>
     <div class="error">Please select your value</div>

     <input type="submit" value="Show Hidden Div" />         
 </form>

 <div class="suprise">
   Hidden Div
 </div>

和 jQuery

$('.submit').click(function(){
   var correct = true;
   $('select').each(function(){
     if($(this).val() != 'option2value'){
       //next is the error... it might be better to use an id there
       $(this).next().show();
       correct = false;
     }
   })
   if(correct){
    $(".results").animate({ 
            marginTop: -480}, 400); 
   }
 })

我只是需要一点帮助，如何制作正确的触发器......我不知道该怎么做。

多谢你们！

Answer 1

各位，对不起。在没有设置 .error div 的情况下，我在播放 .next 时遇到了麻烦...它现在可以正常工作，感谢您的帮助。

Answer 2

首先，您需要在其中插入一个 idselect

<select id="select1">
     <option>Please Select Your Value</option>
     <option>Pick this value 1</option>
 </select>
 <div class="error">Please select your value</div>

 <select id="select2">
     <option>Please Select Your Value</option>
     <option>Pick this value 2</option>
 </select>

$("select[id^=select]").on("change", function() {
    if ($(this).attr("id") == "select1") {
        if ($(this).val() == $("#select2").val()) {
            alert("You are wrong");
        } else {
            alert("You are right");
        }
    }
    else {
        if ($(this).val() == $("#select1").val()) {
            alert("You are wrong");
        } else {
            alert("You are right");
        }
    }
})​