如何将值设置为下拉列表

Question

我正在使用 jQuery 在选择第一个下拉列表时设置第二个下拉列表项。 在编辑操作时，我想将获取的数据设置为第二个下拉列表。 我想将ViewBag.UserLinkedList设置为第二个下拉列表。

View:
        <div class="form-row">
          <div class="col-lg-7">
            @Html.Label("User Type") @Html.DropDownListFor(m => m.LoginUserTypeID(SelectList)ViewBag.LoginUserTypeList, "--- Select User Type ---", new { @class = "form-control" })
          </div>
        </div>
        <div class="form-row">
          <div class="col-lg-7">
            @Html.Label("Parent User") @Html.DropDownListFor(m => m.UserLinkedID, new SelectList(""), "--- Select ---", new { @class = "form-control" })
          </div>
    <script>

        $(document).ready(function() {
          $("#LoginUserTypeID").change(function() {
            $.get("/User/GetParentUserList", {
              UserTypeID: $("#LoginUserTypeID").val()
            }, function(data) {
              $("#UserLinkedID").empty();
              $.each(data, function(index, row) {
                $("#UserLinkedID").append("<option value='" + row.Id + "'>" + row.Name + "</option>")
              });
            });
          })
        });

    </script>

Controller：

public JsonResult GetParentUserList(int UserTypeID)
{
  List<V_Dealer_DealerEmployee> LinkedIDList = new List<V_Dealer_DealerEmployee>();
  if (UserTypeID == 1 || UserTypeID == 2)
  {
    var d = from s in db.VDNSEmployeeMaster
              select new
              {
                Id = s.EmpId,
                Name = s.FirstName + " " + s.MiddleName + " " + s.LastName
              };
    d.ToList();
    return Json(d.ToList(), JsonRequestBehavior.AllowGet);
  }
  else
  {
    var unionAll = (from word in db.VDNSDealer select new 
    { 
      Id = word.m_code, 
      Name = word.institute_name 
    }).Concat(from word in db.DealerEngineerMaster select new { 
      Id = word.EnggId, 
      Name = word.EngineerName 
    });
    return Json(unionAll.ToList(), JsonRequestBehavior.AllowGet);
  }
}

编辑动作

    public ActionResult Edit(int id)
    {
var user = db.Users.SingleOrDefault(c => c.Id == id);
if (user == null)
  return HttpNotFound();

List<LoginUserType> LoginUserTypeList = db.LoginUserType.ToList();
ViewBag.LoginUserTypeList = new SelectList(LoginUserTypeList, "UserTypeId", "UserTypeName");
List<V_Dealer_DealerEmployee> UserLinkedList = db.VDealerDealerEmployee.ToList();
ViewBag.UserLinkedList = new SelectList(UserLinkedList, "Id", "Name");

    return View("New", user);
    }

Answer 1

从edit操作返回视图后，您需要调用LoginUserTypeID的change function 。 这是您所需的js

function UpdateUserLinkedIdDropdown(){
    var userTypeId = $("#LoginUserTypeID").val();
    //This check is for no options selected in LoginUserTypeID Dropdown
    if(userTypeId === null || userTypeId === "" || userTypeId === undefined)
        userTypeId = 0;
    $.get("/User/GetParentUserList", {
            UserTypeID: userTypeId
        }, function(data) {
        $("#UserLinkedID").empty();
        $.each(data, function(index, row) {
            $("#UserLinkedID").append("<option value='" + row.Id + "'>" + row.Name + "</option>")
        });
    });
}

$("#LoginUserTypeID").change(function() {
    UpdateUserLinkedIdDropdown();
});

// Call it initially when view loaded
// You can do it in this way
UpdateUserLinkedIdDropdown();
// OR This way
$("#LoginUserTypeID").trigger('change');

试试看。 我认为这会奏效。 如果不评论请