从下拉列表条目动态创建多个文本框

时间:2018-06-13 09:56:05

标签: c# jquery

我正在尝试从C#中的dropdownlist值创建多个文本框。以下是我的代码。每当我在下拉列表中选择一个值时,它都没有显示任何文本框。提前致谢

<div class="form-group2">
    @Html.LabelFor(m => m.AdditionalGuest, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.AdditionalGuest, new List < SelectListItem >{
        new SelectListItem { Text = "0", Value = "0" },
        new SelectListItem { Text = "1", Value = "1" },
        new SelectListItem { Text = "2", Value = "2" },
        new SelectListItem { Text = "3", Value = "3" },
        new SelectListItem { Text = "4", Value = "4" },
        new SelectListItem { Text = "5", Value = "5" }
        }, new { @id = "guests" })
    </div>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
$("#guests").change(function(){
    for(i=0;i<parseInt($(this).val();i++){
        $('.form-group2').append('<div class="form-group"><br>@Html.LabelFor(m => m.AdditionalGuestName, new { @class = "col-md-2 control-label" })<br><div class="col-md-10"><br>@Html.TextBoxFor(m => m.AdditionalGuestName, new { @class = "form-control" })</div></div>');
    }
    }
</script>

1 个答案:

答案 0 :(得分:0)

@saikat检查以下解决方案

<div class="form-group2">
    @Html.LabelFor(m => m.AdditionalGuest, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.AdditionalGuest, new List<SelectListItem>{
        new SelectListItem { Text = "0", Value = "0" },
        new SelectListItem { Text = "1", Value = "1" },
        new SelectListItem { Text = "2", Value = "2" },
        new SelectListItem { Text = "3", Value = "3" },
        new SelectListItem { Text = "4", Value = "4" },
        new SelectListItem { Text = "5", Value = "5" }
        }, new { @id = "guests" })
    </div>
</div>
<br/>
<div class="form-group3">

</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script>
    $("#guests").change(function () {

        $('.form-group3').html("");
        for (i = 0; i < parseInt($(this).val()) ; i++) {
            $('.form-group3').append('<div class="form-group"><br>@Html.LabelFor(m => m.AdditionalGuestName, new { @class = "col-md-2 control-label" })@Html.TextBoxFor(m => m.AdditionalGuestName, new { @class = "form-control" })</div>');
        }
    });
</script>

您的脚本存在问题。