2个不同的选择+提交按钮显示隐藏的div

时间:2012-09-28 19:17:21

标签: jquery

当谈到jQuery时,我是一个巨大的菜鸟,我非常需要帮助。

由于它是一个简单的原型,每个选择将有2个选项。如果用户从BOTH中选择第二个选项,则触发提交,隐藏的div将显示并滚动屏幕。

如果用户尝试按下提交而不选择这两个选项,则会在非选定选项上方弹出错误消息

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

有人可以帮我一把吗?我的主要问题是获取这两个值然后输入将起作用,或显示错误消息...

1 个答案:

答案 0 :(得分: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();
   }
 })