asp.net mvc 3 - JQuery + MVC 3: Client-Side Dynamic Data Binding to Html.DropDownList -
i have "create user" form user can have number of roles. hence decided add dropdownlist populated roles , add "add" link/button next:
<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>
in scenario supposed when "add" clicked dropdownlist populated same roles data , "add" , "delete" links/buttons next list should added in new line. if user clicks "add" same process repeated. if user clicks "delete" dropdownlist next link/button should gone.
i've tried write javascript code , controller no success. suggestions?
you should list or array binding selected values on server-side.
actionresult myactionname(list<int> selectedroles){ }
---------------view----------------
<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>
Comments
Post a Comment