Как я могу связать свою форму только одной функцией?

Question

Мне нужно создать форму со многими тэгами select и в каждом теге select откроется другой select, и в этом выберите другой и другой, другой и другой до конца формы.

У меня есть это сейчас http://jsfiddle.net/8SZ5n/1/, но это не общее, и мне нужно будет вызвать эту функцию в каждом выборе.

<script type="text/javascript"> 
$(function() { 
    $('.select').change(function(){ 
     if ($(this).val() == "1") { 
      $('.divR1').show(); 
      $('.divR2').hide(); 

     }else if($(this).val() == "2"){ 
      $('.divR2').show(); 
      $('.divR1').hide(); 
     } 

     else { 
      $('.divR1').hide(); 
      $('.divR2').hide(); 
     } 
    }); 
}); 
</script> 

<div id="div1"> 
    <select class="select" autocomplete="off"> 
     <option value="#" checked>Escolha</option> 
     <option value="1">Sim</option> 
     <option value="2">Não</option> 
    </select> 

    <div class="divR1" style="display:none"> 
     1 
     <select autocomplete="off"> 
      <option value="#" checked>Escolha</option> 
      <option value="1">Sim</option> 
      <option value="2">Não</option> 
     </select> 
    </div> 

    <div class="divR2" style="display:none"> 
     2 
     <select autocomplete="off"> 
      <option value="#" checked>Escolha</option> 
      <option value="1"></option> 
      <option value="2"></option> 
     </select> 
    </div> 
</div> 

Answer 1

http://jsfiddle.net/8SZ5n/5/

$(function() { 
    $(".select").change(function() { 
     var next = $('option', this).filter(':selected').attr('next'); 
     $($(this).attr('hide')).hide(); 
     if (next != undefined) { 
      $(next).show(); 
     } 
    }); 
}); 

Answer 2

$(function() { 
    $(".select").change(function() { 
     var id = $(this).val(); 
     $(".selectDiv").hide(); 
     $(".divR" + id).show(); 
    }); 
}); 

Я добавил класс "selectDiv" для всех зависимых дивы; Кроме того, «divR» должен быть ID муравей не класс, если он уникален;)

EDIT jsFiddle

Answer 3

Ну, вы не четко определить конец формы так, вот один пример, который продолжает идти до вы хотите, чтобы он :)

JSFiddle

$(function() { 
    $('select').change(handler); 
}); 

function handler() { 
    var x = $(this); 
    if (x.val() != '#') { 
     var div = $('<div>').append(x.val()); 
     x.parent().append(div); 
     var select = $('<select>') 
      .attr('autocomplete', 'off') 
      .change(handler) 
      .append($('<option>').attr('value', '#').append('Escolha')) 
      .append($('<option>').attr('value', '1').append('Sim')) 
      .append($('<option>').attr('value', '2').append('Não')); 
     div.append(select); 
    } else { 
     x.siblings().remove(); 
    } 
}