首页 > 解决方案 > 需要通过文本框和按钮向 DropDownList 添加新选项

问题描述

所以我一直在互联网上寻找一个体面的解决方案,但我试过的都没有奏效。问题是,我有 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。

标签: asp.net-mvcrazor

解决方案


您必须通过 JavaScript 添加它们。您可以使用 JQuery 来执行此操作

首先将按钮 onclick 事件绑定到诸如 onclick="addNewItem()" 之类的 JavaScript 方法

function addNewItem(){

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

推荐阅读