简化jQuery代码显示/隐藏表单域

Question

我需要在窗体中显示一些选择或隐藏它们，具体取决于上一个选定的选项。我觉得代码非常简单，这里是JavaScript：

$(document).ready(function() { 
    $('#A2').hide(); 
    $('#A3').hide(); 
    $('#A5').hide(); 
    $('#A6').hide(); 
    //A8, A9, A11... 

    $('#A1').change(function(){ 
     if($(this).val() == "1"){ 
      $('#A2').show(); 
      $('#A2').focus(); 
     } 
     else $('#A2').hide(); 
    }); 
    $('#A2').change(function(){ 
     if($(this).val() == "1"){ 
      $('#A3').show(); 
      $('#A3').focus(); 
     } 
     else $('#A3').hide(); 
    }); 
    //the same with A4, A5, A7... 
}); 

这里是HTML的一部分：

<select name="A1" id="A1"> 
    <option selected="selected">¿Conoce?</option> 
    <option value="1">Sí</option> 
    <option value="0">No</option> 
</select> 
<select name="A2" id="A2"> 
    <option selected="selected">¿Ha usado?</option> 
    <option value="1">Sí</option> 
    <option value="0">No</option> 
</select> 
<select name="A3" id="A3"> 
    <option selected="selected">¿Nota?</option> 
    <option value="0">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
    <option value="9">9</option> 
    <option value="10">10</option> 
    <option value="99">Ns/Nc</option> 
</select> 
//the same for A4-A6, A7-A9... 

我要的是建立一个功能，将做到这一点，而不吨代码...我已经测试了下一个JS，但它不工作：

$.fn.validar1 = function(elem) { 
    if(elem.val() == "1"){ 
     elem.next('select').show(); 
     elem.next('select').focus(); 
    } 
    else elem.next('select').hide(); 
} 

validar1('#A1'); 

我知道，我的代码是非常糟糕......我开始使用jQuery，请怜悯：O）

Answer 1

这是你所需要的，如果你已经证明了HTML和JS是你得到：

$(document).ready(function() { 
    $('select').hide(); 

    $('select').change(function(){ 
     if($(this).val() == "1"){ 
      $(this).next().show().focus(); 
     } 
     else $(this).next().hide(); 
    }); 
}); 

如果这样都不行，做一个fiddle