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

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

我将“selectDiv”类添加到所有依赖的div中;另外，“divR”应该是ID蚂蚁而不是类，如果它是唯一的;）

编辑jsFiddle

Answer 2

嗯，你没有清楚地定义表格的结尾，所以，这里有一个例子，一直持续到你想要它：）

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

Answer 3

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

如何只用一个函数链接我的表单？

3 个答案: