动态添加选项到下拉 MVC Razor

Question

我在 HomeController 中有这段代码，应该返回最后 6 行。

private List<SelectListItem> GetOriginalIDs(string thisPWS)
{
    List<SelectListItem> list = new List<SelectListItem>();

    var cat = (from c in _db.DWS_BactiBucket.OrderByDescending(x => x.SampDate) 
               where  c.PWS == thisPWS && c.SampType  == "R" && c.IsTOTPresent  == "1" select c).Take(6).ToArray();

    for (int i = 0; i < cat.Length; i++)
    {
        list.Add(new SelectListItem { Text = cat[i].LabSampID + " (" + cat[i].SampDate + ")", Value = cat[i].LabSampID.ToString() });
    }

    return list
}

我想运行此代码以根据第一次下拉菜单中选择的内容填充第二次下拉菜单（我敢打赌您以前从未听说过这个）。

这是添加视图的第一个下拉菜单：

<div class="editor-field">
    @{
        var listItems = new List<SelectListItem>();
        listItems.Add(new SelectListItem{Text="", Value=""});                
        listItems.Add(new SelectListItem{Text="R", Value="R"});
        listItems.Add(new SelectListItem{Text="P", Value="P"});                
        listItems.Add(new SelectListItem{Text="C", Value="C"});
        listItems.Add(new SelectListItem{Text="T", Value="T"});
        listItems.Add(new SelectListItem{Text="A", Value="A"});   
        listItems.Add(new SelectListItem{Text="S", Value="S"});                

        }

    @Html.DropDownListFor(m=>m.SampType, listItems)

</div>

这一切都显示得很好。 这是第二个下拉菜单：

        <div class="editor-field">

            @Html.DropDownListFor(model => model.OrigSampID(IEnumerable<SelectListItem>)ViewBag.Originals)
   })

         </div>

目标是使用 JSON 和/或 jQuery 填充第二个，但我无法理解调用控制器和填充第二个下拉列表的代码语法。所有的例子都没有帮助我。

Answer 1

所以如果我们有这个 html:

<select id="drop1">
  <option value="R">R</option>
  <option value="P">P</option>
  <option value="C">C</option>
  <option value="T">T</option>
</select>
<select id="drop2">
</select>

你可以使用这个 jquery 来监听选择选项的动作

$('#drop1').change(function(){
   $.get('GetData', {value : $(this.val())}, function(json){
      var html = ''
      $(json).each(function() {
         html += '<option value="' + $(this).value  +'">' + $(this).text + ' '</option>'
      })
      $('#drop2').empty().append(html) //empty first then append to remove previous elements
   })
});

你可以在你的控制器中有一个方法调用 GetData 像这样

[HttpGet]
public ActionResult GetData(char val)
{
  //turn elements into json result
  return Json( elements);
}

注意：您可以从后端返回一个已经构建了 html 的部分，然后将其附加到下拉列表中，但我发现在 JS 中创建选项而不是在后面创建更简单结尾。