dynamically generate same dropdownlist during run-time from user input

I got a question here about the said title.

Lets say I have already populated a dropdownlist like so:

<%: Html. DropDownListFor ( m => m. CategoryMenu , Model. C开发者_运维知识库ategoryMenu, "Select Category"  )%>

and I have a button that says "Add new category" ( I am trying to add another category with the same source )

And I need to be able to collect all the data entered by the user.

So for example, if the user has added another category, I should be able to get the two different value during postback.

Would I be able to complete it using jquery?

Are there any provisions from .net c# that would be able to do this?

You could do this as an ajax request with a JSON response like so:

<script type="#text/javascript">

     $(document).ready(function{
           $("#MyAddCategoryForm").submit(AddNewCategory);
     });

     function AddNewCategory()
     {
         var categoryTitle= $("#MyCategoryTextField").val();

         var data = {categoryTitle:categoryTitle};

         $.post("/Category/Add/", data, function(data, response){
                if(response == "success")
                {
                      var option = $("<option></option>").html(categoryTitle).val(data.Value);

                      $("#MyCategoryDropDown").append(option);
                }
         });

         return false;
     }

</script>

Controller code:

[HttpPost]
public JsonResult(string categoryTitle)
{
      //Insert category into DB
      //And retrieve unique ID as "value"

      int value = //add to db

      return Json(new {Value = value});
}

Forgive any errors please I am doing this off the top of my head without actually implementing it but it should be pretty close to the mark.