2不同的選擇+提交按鈕顯示一個隱藏的div

Question

當談到jQuery時，我是一個巨大的noob，我在這裏需要很大的幫助。

由於它是一個簡單的原型，每個選擇將有2個選項。如果用戶從BOTH選擇第二個選項，然後觸發提交，隱藏的div將顯示並滾動屏幕。

如果用戶嘗試按下提交withouth的選擇那些2個選項，錯誤信息將出現在非選定的選項

像這樣的東西安靜的HTML

即時通訊思想

<style> 
    .surprise { 
     display: none; 
    } 
    .error { 
     display: none; 
    } 
</style> 

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

任何人都可以以上幫幫我？我的主要問題是要抓住這些2倍的值，然後輸入會工作，或顯示錯誤消息...

Answer 1

沒有測試：

//add this id to submit or use your own 

$('#submit').click(function(){ 

    $('.error').hide(); 
    $('.surprise').hide(); 

    var correct = true; 
    $('select').each(function(){ 
    // the option2value is presumed to always be the same as in <option value="option2value" >Text</option 
    if($(this).val() != 'option2value'){ 
     //next is the error... it might be better to use an id there 
     $(this).next().show(); 
     correct = false; 
    } 
    }) 
    if(correct){ 
    $('.surprise').show(); 
    } 
})