C# 在MVC中动态添加时，如何将每行的Dropdownlist值设置为Textboxfor

早上好，我正在用MVC创建一个项目，我正在学习如何使用它。 但我的问题是，当我动态生成dropdownlist时，如何将它的选定值放置在文本框中？ 我分享我制作的GIF，以便更好地显示我的意思

这是我的视图代码：

@model List<MvcApplication30.TB_CS_TEST>

<style>
    th {
        text-align:left;
    }
    td {
    padding:5px;
}
</style>
<div style="width:700px; padding:5px; background-color:white;">
    @using (Html.BeginForm("Bulk","Bulk", FormMethod.Post))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)

        if (ViewBag.Message != null)
        {
            <div style="border:solid 1px green">
                @ViewBag.Message
            </div>
        }

        <div><a href="#" id="addNew">Add Product</a></div>
        <table id="dataTable" border="0" cellpadding="0" cellspacing="0">
            <thead>
            <tr>
               <th>Producto</th>
                <th>Cantidad</th>
                <th></th>
            </tr>
                </thead>
            <tbody>
            @if (Model != null && Model.Count > 0)
            {

                int j = 0;
                foreach (var i in Model.GroupBy(a => a.CONTACTID))
                {


                        <td>@Html.TextBoxFor(a => a[j].CONTACTNO)</td>
                        <td>@Html.DropDownList("DESCRIPTION" ,"Select Description")</td>
                        <td>@Html.TextBoxFor(a=>a[j].CONTACTPERSON, new { id = "proli"})</td>
                        <td>
                            @if (j > 0)
                            {
                                <a href="#" class="remove">Remove</a>
                            }
                        </td>

                    j++;
                }
            }
         </tbody>
        </table>

        <input type="submit" value="Save Bulk Data" />
          @Html.DropDownList("NAMEPLACE", "Select Place")
    }
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


@* Here I will add Jquery Code for validation / dynamically add new rows / Remove rows etc *@

@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    <script language="javascript">
        $(document).ready(function () {
            $("#addNew").click(function (e) {
                e.preventDefault();
                var last = $('#dataTable>tbody>tr:last');
                if (last.length > 0) {
                    var name = last.children().find('input,select')[0].name;
                    var index = Number(name.replace(/[^0-9]/gi, '')) + 1;
                    var tr = ('<tr>' + last.html().replace(/[0-9]+__/gi, index + '__') + '</tr>').replace(/\[[0-9]+\]+[.]/gi, '[' + index + '].');
                    $('#dataTable tbody').append(tr);
                }
            });
            $('#DESCRIPTION').change(function (e) {
                {
                    var selectedValue = $(this).val();
                    $('#proli').val(selectedValue);
                }
            });

        });


    </script>
}

@型号列表
th{
文本对齐：左对齐；
}
运输署{
填充物：5px；
}
@使用（Html.BeginForm（“Bulk”、“Bulk”、FormMethod.Post））
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（true）
如果（ViewBag.Message！=null）
{
@查看包。留言
}
产品
康蒂达
@if（Model！=null&&Model.Count>0）
{
int j=0；
foreach（Model.GroupBy中的var i（a=>a.CONTACTID））
{
@Html.TextBoxFor（a=>a[j].CONTACTNO）
@Html.DropDownList（“说明”，“选择说明”）
@Html.TextBoxFor（a=>a[j].CONTACTPERSON，new{id=“proli”}）
@如果（j>0）
{
}
j++；
}
}
@Html.DropDownList（“NAMEPLACE”、“selectplace”）
}
@*在这里，我将添加Jquery代码进行验证/动态添加新行/删除行等*@
@节脚本{
@Scripts.Render（“~/bundles/jqueryval”）
$（文档）.ready（函数（）{
$（“#添加新”）。单击（函数（e）{
e、 预防默认值（）；
var last=$（“#dataTable>tbody>tr:last”）；
如果（last.length>0）{
var name=last.children（）.find（'input，select'）[0]。name；
变量索引=编号（名称.替换（/[^0-9]/gi'，）+1；
var tr=（''+last.html（）.replace（/[0-9]+\\[/gi，index+'.+''））.replace（/\[[0-9]+\]+[.]/gi，['.+index+'.]）；
$（'#dataTable tbody'）。追加（tr）；
}
});
$（“#说明”）。更改（功能（e）{
{
var selectedValue=$（this.val（）；
$（'proli'）.val（selectedValue）；
}
});
});
}

---

谢谢。

在此代码中，您使用相同的id

#DESCRIPTION

#proli

对于动态字段，id在整个页面中始终是唯一的。试着利用课堂

$('#DESCRIPTION').change(function (e) {
                {
                    var selectedValue = $(this).val();
                    $('#proli').val(selectedValue);
                }
            });

下面的代码是更新代码。将id用作类，只需将id更改为html中的类

 $(document).ready(function () {
            $("#addNew").click(function (e) {
                e.preventDefault();
                var last = $('#dataTable>tbody>tr:last');
                if (last.length > 0) {
                    var name = last.children().find('input,select')[0].name;
                    var index = Number(name.replace(/[^0-9]/gi, '')) + 1;
                    var tr = ('<tr>' + last.html().replace(/[0-9]+__/gi, index + '__') + '</tr>').replace(/\[[0-9]+\]+[.]/gi, '[' + index + '].');
                    $('#dataTable tbody').append(tr);
                }
            });
            $('#dataTable').on("change",'.DESCRIPTION',function (e) {
                {
                    var selectedValue = $(this).val();

                     $(this).closest("tr").find('.proli').val(selectedValue);
                }
            });

        });
``

$（文档）.ready（函数（）{
$（“#添加新”）。单击（函数（e）{
e、 预防默认值（）；
var last=$（“#dataTable>tbody>tr:last”）；
如果（last.length>0）{
var name=last.children（）.find（'input，select'）[0]。name；
变量索引=编号（名称.替换（/[^0-9]/gi'，）+1；
var tr=（''+last.html（）.replace（/[0-9]+\\[/gi，index+'.+''））.replace（/\[[0-9]+\]+[.]/gi，['.+index+'.]）；
$（'#dataTable tbody'）。追加（tr）；
}
});
$（'#dataTable'）。关于（“更改”、'.DESCRIPTION'，函数（e）{
{
var selectedValue=$（this.val（）；
$（this）.closest（“tr”）.find（'.proli'）.val（selectedValue）；
}
});
});
``

Hi Kamlesh Bhurke，当你提到“使用类”时，你的意思是在“下拉列表”或“文本框”中添加类吗？谢谢。是的，两者都使用class而不是id。或者您可以使用动态生成的id，例如，

#DESCRIPTION_1，#DESCRIPTION_2

，就像这样，每个id都应该是唯一的。我已经更新了代码，只需在htmlOk中将id更改为class，让我在HTML代码内部和内部都设置一个id。我确认它是否对我有效抱歉Kamlesh它对我无效。我只需在文本框中添加新的{class=“proli”}和下拉列表new{class=“DES”}，jquery与您编写的相同，只是更改了“.DES”的“.DESCRIPTION”