如何在mvc中输入另一个下拉列表来填充下拉菜单

Question

我有2个下拉菜单，称为药物和强度。在选择药物时，应根据药物下拉列表的输入填充下拉菜单。 HTML代码：

<label>Medication<sup>*</sup></label> @Html.DropDownListFor(Model => Model.medication, Model.medication, htmlAttributes: new { id = "MyId" , style = "width:200px; height :30px"}) <button type="button" style="height:30px;" onclick="return openmedication()">search</button>         
<label>Strength</label>@Html.DropDownListFor(Model => Model.strength, Model.strength, "Select Strength", new { style = "width:200px; height :30px" }) 

**当我运行这段代码我收到来自table.without取决于用药排序值强度下拉列表中的所有值。

我的模型：**

public List<ItemModel> med()//FOR MEDICATION 
    { 

     List<ItemModel> itemList = new List<ItemModel>(); 
     connection(); 
     SqlCommand cmd = new SqlCommand("procmedication_dropdown1", con); 
     cmd.CommandType = CommandType.StoredProcedure; 
     cmd.Parameters.AddWithValue("@PstrOperationFlag", "S-drugname"); 
     con.Open(); 
     SqlDataAdapter sd = new SqlDataAdapter(cmd); 
     DataTable dt = new DataTable(); 
     sd.Fill(dt); 
     ItemModel item = new ItemModel(); 
     using (SqlDataReader sdr = cmd.ExecuteReader()) 
     { 
      ItemModel io = new ItemModel(); 
      while (sdr.Read()) 
      { 
       io = new ItemModel(); 
       io.medicat = sdr["drugname"].ToString(); 


       itemList.Add(io); 

      } 
     } 
     con.Close(); 
     return itemList; 
    } 
    public List<SelectListItem> Add()// FOR STRENGTH 
    { 

     List<SelectListItem> items = new List<SelectListItem>(); 
     connection(); 

     SqlCommand cmd = new SqlCommand("procmedication_dropdown1", con); 
     cmd.CommandType = CommandType.StoredProcedure; 
     cmd.Parameters.AddWithValue("@pstroperationflag", "S-strength"); 

     con.Open(); 
     using (SqlDataReader sdr = cmd.ExecuteReader()) 
     { 
      while (sdr.Read()) 
      { 
       items.Add(new SelectListItem 
       { 
        Text = sdr["strength"].ToString(), 
        Value = sdr["strength"].ToString() 
       }); 
      } 
     } 
     con.Close(); 
     return items; 
    } 

Answer 1

试试下面的代码

查看：

//Load Medication Data on Page Load 
    @Html.DropDownListFor(Model => Model.medication, Model.medication, htmlAttributes: new { id = "MyId" , style = "width:200px; height :30px"}) 

//Load Strength data on change of medication from ajax call        
    @Html.DropDownListFor(Model => Model.strength, Model.strength, "Select Strength", new { style = "width:200px; height :30px" }) 

脚本：

$("#MyId").on('change', function() { 
    //Get the value of Medication dropdown 
    var medicationId = $("#MyId").val(); 
    $.ajax({ 
      url: '@Url.Action("GetStrengthDropdown","Controller")', 
      type: 'GET', 
      dataType: 'json', 
      data:medicationId :medicationId , 
      success: function(data) { 

      $.each(data, function (i) { 
       var optionhtml = '<option value="' + 
       data[i].Value + '">' +data[i].Text + '</option>'; 
       $("#strength").append(optionhtml); 
      }); 

      } 
     }); 
    }); 

控制器：

public JsonResult GetStrengthDropdown(int medicationId) 
{ 
// DB call to get dropdown Values. 
return JSON(values); 
} 

Answer 2

你可以做到这一点使用jQuery这样。

$(document).ready(function(){ 
    $("#medication").on("change",function(){ 
     getStrengthList(); 
    }); 
}); 

function getStrengthList() { 
    var url = "Add" // Url of controller 

    $.ajax({ 
     url: url, 
     timeout: 500000, 
     type: "GET", 
     beforeSend: ShowLoader, 
     success: function (data) { 
      HideLoader(); 
      var selectList = $('#strength'); 
      selectList.find('option').remove().end(); 

      if (data.length > 0) { 
       var selected = ""; 
       var selectedName = ""; 
       var i = 0; 
       $.each(data, function (key, data) { 
        selectList.append('<option value="' + data.Value + '">' + data.Text + '</option>'); 

        if (i == 0) { 
         selected = data.Value; 
         selectedName = data.Text; 
         i++; 
        } 
       }); 
       selectedCategory = selected; 
       selectedCategoryName = selectedName.toLowerCase(); 
       selectList.val(selected); 
      } 

     }, 
     complete: function() { 

     }, 
     error: function() { 

     }, 
    }); 
}