Question

HTML

<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 class="repeat">ADD MORE</a>
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" class="add" style="display:none">Add Age</a>

<div id="light" class="white_content">
<div class="textboxDiv"></div><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>

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

CSS

.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border-radius:7px;
background-color: rgba(255, 255, 255, 1);
z-index:1002;
overflow: auto;
}
.form-control {
display: block;
width: 100%;
height: 26px;
padding: 2px 0px 2px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #010F2B;
vertical-align: middle;
background-color: #E6E8E9;
border: 2px solid #ebebeb;
border-radius: 4px;
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out  0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
   }

的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");
    }
});
});

我试图创建一个弹出窗口，显示的文本字段数等于所选值的数量，它在这段代码中运行正常，但问题是我还必须复制选择框然后创建相同的所有创建的选择框的功能...检查我的小提琴并建议任何解决方案

Answer 1

尝试以下代码

HTML

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

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

<强> JSFiddle Demo

Answer 2

您可以使用.live（），因为：

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

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

2 个答案: