FadeIn fadeOut取决于select中的先前选项值

Question

我有10个选择标签，如

<div class="ques"><select><option></option><option></option></select></div>
<div class="ques"><select><option></option><option></option></select></div>
<div class="ques"><select><option></option><option></option></select></div>
 <div class="ques"><select><option></option><option></option></select></div>
<div class="ques"><select><option></option><option></option></select></div>
 <div class="ques"><select><option></option><option></option></select></div>
.
.
<div class="ques"><select><option></option><option></option></select></div>

现在我想要的是 默认情况下，它们中的第一个应该是可见的。当用户从select tag中选择任何值时，现在应该可以看到下一个选择标记。对于下一个标签也是如此。 如果用户取消选择标记的值，则所有下一个标记都应淡出。

我尝试的是像

 <script>
$(".ques").click(function(){
 var x = $(this).find('select').attr('id')

 if(x ==1)
{
//Here I check for the selected value
//fadeIn the next select tag
}
if(x ==2)
{
//fadeIn the next select tag
}
//And so ON
});
</script>

我只是在寻找更好，更有效的解决方案。

提前致谢