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中创建选项而不必在后面创建它就更简单了结束。

动态添加下拉MVC Razor的选项

1 个答案: