Jquery 使用Razor布局向div动态添加DropDownList/SelectList

我正在构建一个Razor布局的表单，它有一个下拉列表和一个文本框

下面是一个“添加另一个”链接

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

目前，我使用jQuery对“普通”或一次性文本框执行此操作：

    var phoneFieldsIndex = 0;

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

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

            phoneFieldsIndex++;

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

        }

    });

var phoneFieldsIndex=0；
$（“#添加另一个电话链接”）。单击（函数（）{
if（$（'#phoneFields输入：last'）.val（）{
phoneFieldsIndex++；
$（“#phoneFields”）.append（“
”）；
}
});

这很好——当使用addAnotherPhoneLink单击a元素时，另一个输入框（索引增加）会添加到div#phoneFields中

我正试图用我的DropDownList/Input对做类似的事情

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

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

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

@Html.DropDownList（“社交网络”，新选择列表（Model.AvailableSocialNetworks））

我发现这里有两个问题：

• 我每次都需要增加社交网络DropDownList的索引
• 我需要Model.AvailableSocialNetworks中的值，以便为每个

---

使用jQuery复制一个现有的

选择列表（或使用服务器提供一个隐藏列表作为模板并复制该列表）

我假设索引与您同时添加的
输入
框的索引相同？
使用jQuery复制一个现有的
选择
列表（或使用服务器提供一个隐藏列表作为模板并复制该列表）

我假设索引与您同时添加的
输入
框的索引相同

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

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