需要通过文本框和按钮向DropDownList添加新选项

Question

所以我一直在网上寻找一个合适的解决方案，但我没有尝试过的任何工作。问题是，我有DropDownLists（其中4个）看起来像这样:(这些都在视图中）

Html.DropDownList("SeriesColor", new List<SelectListItem>

{

new SelectListItem {Text = "GR- Green", Value = "GR"},

new SelectListItem {Text = "BL - Blue", Value = "BL"},

new SelectListItem {Text = "LB - Light Blue", Value = "LB"},

new SelectListItem {Text = "NO - None", Value = "NO"},

new SelectListItem {Text = "OR - Orange", Value = "OR"},

new SelectListItem {Text = "PP - Purple", Value = "PP"}

我还有一个文本框和按钮:(也在视图中）

 <input id="addD4" type="text" />

 <button class="btn btn-default" type="button">Add Default</button>

我想要做的是允许用户输入一个值（任何东西），按下按钮并将其添加到下拉列表中。我见过的大部分解决方案都已过时，或者不支持MVC / Razor。

Answer 1

你必须通过JavaScript添加它们。你可以使用JQuery

这样做

第一个Bind Button onclick事件到一个JavaScript方法，如onclick =“addNewItem（）”

function addNewItem(){

$("#SeriesColor").append($('<option>', {
value: $('#addD4').val() ,
text: $('#addD4').val()
  });
}