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

你应该添加这样的东西

$(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();

})

我确定代码需要一些调整，但我希望它很有用

Answer 2

你应该有一个列表或数组来绑定服务器端的选定值。

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>

JQuery + MVC 3：客户端动态数据绑定到Html.DropDownList

2 个答案: