Javascript 如何仅用一个函数链接表单？

我需要创建一个有许多选择标记的表单，在每个选择标记中，另一个选择将打开，在这个表单中，选择另一个，另一个，直到表单结束

我现在有这个，但它不是泛型的，我需要在每个select中调用这个函数

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

我将selectDiv类添加到所有从属div中；此外，如果divR是唯一的，那么它应该是一个ID，而不是一个类

---

编辑

好吧，您没有清楚地定义表单的结尾，因此，这里有一个示例一直持续到您想要它：

---

考虑使用jQuery NeXT函数，这样您可以在没有ID引用的情况下执行。这个.parent'div'。下一个'div'。查找'select'你能发布一个JSFIDLE链接吗？看看如果我尝试添加另一个具有相同类的div会发生什么。工作正常，但每个select标记不能创建多个新select。每次选择必须仅显示所选选项。示例：首先选择：是或否？Ans:Not New div+New select with Yes或Not在这种情况下，如果我将选项从“Sim”更改为“Não”，两个选项都将在显示模式下继续，我需要仅显示路径中选择的选项。如果所选选项在任何时候发生更改，则带有另一个select或form的新div必须覆盖实际div。同样的问题。如果我尝试添加一个名为id=div2的新div，则第二次选择可以更改第一次选择。与此类似，jsfiddle.net/8SZ5n/8仔细查看html部分每个div都有自己的类，每个select都有属性隐藏元素选择器，如果未选择任何内容，则应该隐藏这些元素，每个选项都有属性next选择器，当选择该选项时应该显示这些元素。

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

$(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();
    }
}

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