Динамически добавить DropDownList/SelectList в DIV с помощью Razor раскладки

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/Входная пара

Однако для 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 коробки вы добавляете в то же время?