JQuery + MVC 3: динамическая привязка данных на стороне клиента к Html.DropDownList

Question

У меня есть форма «Создать пользователя», в которой пользователь может иметь любое количество ролей.Поэтому я решил добавить выпадающий список, который заполняется ролями, и добавить ссылку / кнопку «Добавить»:

<label for="Role">Roles</label>
@Html.DropDownList("Roles", new SelectList((IEnumerable<RoleSummaryView>)ViewData["Roles"], "Id", "Name")) 
<div>
    <a href="#" class="ym-gbox tbalign" style="padding-top:3px;">Add</a>
    <a href="#" class="ym-gbox tbalign" style="padding-top:3px;">Delete</a>
</div> 

В этом сценарии предполагается, что при нажатии «Добавить» другой выпадающий список заполняетсяте же данные ролей и другие ссылки / кнопки «Добавить» и «Удалить» рядом со списком должны быть добавлены в новой строке.Теперь, если пользователь нажимает на любое «Добавить», тот же процесс будет повторяться.Если пользователь нажимает «Удалить», выпадающий список рядом со ссылкой / кнопкой должен исчезнуть.

Я попытался написать код JavaScript и контроллер безуспешно.Есть предложения?

Answer 1

вам нужен список или массив для привязки выбранных значений на стороне сервера.

ActionResult MyActionName(List<int> SelectedRoles){

}

--------------- Посмотреть ----------------

<script>
     var index = 0;
     $("#addButton").click(function(){
            var newSelect = $("<select id='SelectedRoles["+ index +"]' name='SelectedRoles["+ index +"]'></select>");
            $('#SelectedRoles[0] option').each(function(){
                 var option = $("<option></option>").val($(this).val()).text($(this).text());
                 newSelect.append(option);
            });

            $("#newSelectContainer").append(newSelect);

            index++;
     });
     $("#removeButton").click(function(){
          $("SelectedRoles["+ --index +"]").remove();
     })
</script>


<label for="Role">Roles</label>
@Html.DropDownList("SelectedRoles[0]", new SelectList((IEnumerable<RoleSummaryView>)ViewData["Roles"], "Id", "Name")) 
<div>
    <a href="#" class="ym-gbox tbalign" style="padding-top:3px;" id="addButton">Add</a>
    <a href="#" class="ym-gbox tbalign" style="padding-top:3px;" id="removeButton">Delete</a>
</div> 

Answer 2

Вы должны добавить что-то вроде этого

$(myAddButton).bind("click", function(){

$(aDiv).append("<select id='aUniqueId'></select>");
$('#myOriginalSelect option').each(function(item){

$('aUniqueId').append('<option value=' + $(this).value + '>' + $(this).text + '</option>')';

});

}

и для удаления

$('#myUniqueDelete').bind("click", function(){

$('myUniqueSelect').remove();

})

Я уверен, что код нуждается в некоторых настройках, но я надеюсь,это полезно