Question

我正在Razor布局中构建一个具有DropDownList和文本框

的表单

在此之下，会有一个“添加另一个”链接。

单击此按钮，我需要将另一个DropDownList和TextBox对添加到div（让我们称之为#socialNetworks）

目前，我使用jQuery这样做“普通”/一次性文本框：

    var phoneFieldsIndex = 0;

    $('#addAnotherPhoneLink').click(function () {

        if ($('#phoneFields input:last').val()) {

            phoneFieldsIndex++;

            $('#phoneFields').append('<input name="phone[' + emailFieldsIndex + ']" type="text"><br />');

        }

    });

这很好用 - 当点击带有addAnotherPhoneLink的元素时，另一个输入框（索引递增）会添加到div #phoneFields

我正在尝试使用我的DropDownList / Input对执行类似的操作

但是，对于DropDownList，我目前有：

@Html.DropDownList("SocialNetwork", new SelectList(Model.AvailableSocialNetworks))

<input name="Username" type="text" />

所以，我看到这里有两个问题：

我每次都需要递增SocialNetwork DropDownList的索引
我需要为每个复制Model.AvailableSocialNetworks中的值

Answer 1

使用jQuery复制现有的select列表之一（或使用服务器提供隐藏的列表作为模板并复制）。

var newSelect = $('#phoneFields select:first-child').clone()
   .attr("name", 'SocialNetwork[' + emailFieldsIndex + ']');

$('#phoneFields').append(newSelect);

我假设索引与您同时添加的input框的索引相同？

使用Razor布局动态地将DropDownList / SelectList添加到div

1 个答案: