如何将值设置为下拉列表

Posted 2023-04-13

【中文标题】如何将值设置为下拉列表

【英文标题】：How To Set Value To Drop-down list

【发布时间】：2020-01-24 09:14:26

【问题描述】：

我正在使用 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>

控制器：

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);
    

【问题讨论】：

您的Edit 有单独的视图吗？

@Shahjahan - 不，先生，对于编辑和新建，我使用相同的视图

那你需要用javascript来做，我给你发答案

【参考方案1】：

从edit 动作返回视图后，您需要调用LoginUserTypeID 的change 函数。这是你需要的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');

试一试！我认为这会奏效。如果不评论请留言

【讨论】：

@Shahjahan- 谢谢，我会尝试