Javascript 文本字段的数量等于从下拉菜单中选择的数量

HTML

javascript

$(function () {
$(".repeat").on('click', function (e) {
    e.preventDefault();
    var $self = $(this);
    $self.before($self.prev('table').clone());
});
});

$(document).ready(function () {
$(".childage").change(function () {
    var selVal = $(this).val();
    $(".textboxDiv").html('');
    if (selVal > 0) {
        $(".add").css("display", "block");
        for (var i = 1; i <= selVal; i++) {
            $(".textboxDiv").append('<input type="text" class="form-control" /><br>');
        }
    } else {
        $(".add").css("display", "none");
    }
});
});

$（函数（）{
$（“.repeat”）。在（'click'，函数（e）{
e、 预防默认值（）；
var$self=$（本）；
$self.before（$self.prev（'table'）.clone（））；
});
});
$（文档）.ready（函数（）{
$（“.childage”）.change（函数（）{
var selVal=$（this.val（）；
$（“.textboxDiv”）.html（“”）；
如果（选择值>0）{
$（“.add”）.css（“显示”、“块”）；
对于（var i=1；i请尝试下面的代码

HTML


0
1.
2.
3.
4.
5.

jQuery：

$(function () {
    $(".repeat").on('click', function (e) {
        e.preventDefault();
        var $self = $(this);
        $self.before($self.prev('.repeatElement').clone());
    });

    $(document).on('change','.childage',function(){
       var selectVal = parseInt($(this).val()) || 0;
        if(selectVal > 0)
            $(this).closest('table').next('.add').show();
        else
            $(this).closest('table').next('.add').hide();
    });

    $(document).on('click','.add',function(){
        var selVal = $(this).prev().find('.childage').val();
        $(".textboxDiv").empty();
        for (var i = 1; i <= selVal; i++) {
                $(".textboxDiv").append('<input type="text" class="form-control" /><br>');
        }
        $('#light').show();
        $('#fade').show();
    });

    $('#close').click(function(){
       $('#light').hide();
        $('#fade').hide();
    });
});

$（函数（）{
$（“.repeat”）。在（'click'，函数（e）{
e、 预防默认值（）；
var$self=$（本）；
$self.before（$self.prev（'.repeatElement'）.clone（））；
});
$（document）.on（'change'，'childage'，function（）{
var selectVal=parseInt（$（this.val（））| | 0；
如果（选择VAL>0）
$（this）.closest（'table'）.next（'.add'）.show（）；
其他的
$（this）.closest（'table'）.next（'.add'）.hide（）；
});
$（文档）。在（'单击'，'添加'，函数（）上）{
var selVal=$（this.prev（）.find（'.childage'）.val（）；
$（“.textboxDiv”）.empty（）；
对于（var i=1；i，您可以使用.live（），如下所示：

$（文档）.ready（函数（）{
var合计=0；
$（“.childage”）.live（'change'，function（）{
var selVal=$（this.val（）；
total=parseInt（total）+parseInt（selVal）；
$（“.textboxDiv”）.html（“”）；
如果（选择值>0）{
$（“.add”）.css（“显示”、“块”）；
对于（var i=1；我请更具体地说明问题所在。为什么不能对其他
使用相同的方法？这意味着如果您有3个选择框，每3个选择框意味着总共需要9个文本框？对吗？谢谢！！！这对我很有效，但我还希望每次复制div时“添加更多”选项应隐藏，并且仅当我从下拉列表中选择值>0时才显示
$(function () {
$(".repeat").on('click', function (e) {
    e.preventDefault();
    var $self = $(this);
    $self.before($self.prev('table').clone());
});
});

$(document).ready(function () {
$(".childage").change(function () {
    var selVal = $(this).val();
    $(".textboxDiv").html('');
    if (selVal > 0) {
        $(".add").css("display", "block");
        for (var i = 1; i <= selVal; i++) {
            $(".textboxDiv").append('<input type="text" class="form-control" /><br>');
        }
    } else {
        $(".add").css("display", "none");
    }
});
});

<div class="repeatElement">
<table>
    <tr>
        <td>
            <select class="form-control mySelectBoxClass childage" name="noofchilds[]">
                <option selected>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </td>
    </tr>
</table>
<a href="javascript:void(0)" class="add" style="display:none">Add Age</a>
</div>

<a class="repeat">ADD MORE</a>

<div id="light" class="white_content">
    <div class="textboxDiv"></div><a href="javascript:void(0)" id="close">Close</a>

</div>
<div id="fade" class="black_overlay"></div>

$(function () {
    $(".repeat").on('click', function (e) {
        e.preventDefault();
        var $self = $(this);
        $self.before($self.prev('.repeatElement').clone());
    });

    $(document).on('change','.childage',function(){
       var selectVal = parseInt($(this).val()) || 0;
        if(selectVal > 0)
            $(this).closest('table').next('.add').show();
        else
            $(this).closest('table').next('.add').hide();
    });

    $(document).on('click','.add',function(){
        var selVal = $(this).prev().find('.childage').val();
        $(".textboxDiv").empty();
        for (var i = 1; i <= selVal; i++) {
                $(".textboxDiv").append('<input type="text" class="form-control" /><br>');
        }
        $('#light').show();
        $('#fade').show();
    });

    $('#close').click(function(){
       $('#light').hide();
        $('#fade').hide();
    });
});

$(document).ready(function () {
    var total=0;
    $(".childage").live('change', function () {
        var selVal = $(this).val();
        total=parseInt(total)+parseInt(selVal);
        $(".textboxDiv").html('');
        if (selVal > 0) {
            $(".add").css("display", "block");
            for (var i = 1; i <= total; i++) {
                $(".textboxDiv").append('<input type="text" class="form-control" /><br>');
            }
        } else {
            $(".add").css("display", "none");
        }
    });
});