Question

我在这里没有几个下拉列表，如所示，基于此下拉选择，应该填充下一个下拉列表。我试图使用此关键字来获取当前下拉菜单的值，但我无法获取它。

    <td class="border-top-0 border-left-0 border-right-0 align-middle form-group">
                  @{

                    SelectList newSelectList = new SelectList((from s in Model.UserMasterList
                         .ToList()
                                                               select new
                                                               {
                                                                   userId = s.userId,
                                                                   userName =  (s.userFirstName +' '+  s.userLastName)
                                                               }).Distinct()
                                                               ,
                         "userId",
                         "userName",
                         string.IsNullOrEmpty(item.JobConstructionManagerId.ToString()) ? 0 : item.JobConstructionManagerId);           
                                    }



                  @Html.DropDownListFor(model => item.JobConstructionManagerId, (SelectList)newSelectList, new { @class = "form-control js-select js-noFilter hidden DDConstructionManager", size = "2", @value = 0, Id = "JobConstructionManager" + t ,@OnChange="fill();"}) //first dropdown



                   </td>
             <td class="border-top-0 border-left-0 border-right-0 text-center text-align-center"> 

                   @{

                    SelectList newSelectStaffList = new SelectList((from s in Model.UserMasterStaffList                    //.UserConstructionManagersDetailList
                         .ToList()
                                                               select new
                                                               {
                                                                   SuserId  =  s.userId,                                    //s.conUserId,
                                                                   SuserName = (s.userFirstName + ' ' + s.userLastName)    //(s.mqUserMaster.userFirstName +' '+  s.mqUserMaster.userLastName)
                                                               }).Distinct()
                                                               ,
                         "SuserId",
                         "SuserName",
                         string.IsNullOrEmpty(item.JobStaffId.ToString()) ? 0 : item.JobStaffId);           
                                    }


                  @Html.DropDownListFor(model => item.JobStaffId, (SelectList)newSelectStaffList, new { @class = "form-control js-select js-noFilter hidden DDStaff", size = "2", @value = 0, Id = "JobStaff" + t }) //second dropdown

             </td>

主要问题是如何仅将下一个下拉列表移至某个特定的下拉列表

Answer 1

您必须为第一个下拉列表赋予id属性，然后使用jquery处理下拉列表的更改事件以填充第二个下拉列表。

<script type="text/javascript">

            $('#firstDropDownId').change(function () {
                $(function () {
                    $.ajax({
                        url: '@Url.Action("GetSecondData", "YourController")',
                        type: 'POST',
                        dataType: 'json',
                        data: { 'firstData': $("#firstDropDownId").val() },
                        success: function (data) {
                            var options = $('#secondDropDownId');
                            options.empty();
                            $.each(data, function (i, item) {
                                options.append($('<option />').val(item.Id).text(item.Display));
                            });
                        },
                        error: function (response) {
                        }
                    });

                });
            });
        });

</script>

，然后在您的控制器中创建一个操作方法，以填充第二个下拉列表并以json格式返回。

[HttpPost]
public JsonResult GetSecondData(int firstId)
{
     var result = ...; //populate result   
     return new JsonResult { Data = result };
}

Answer 2

我正在为您提供可以使用此概念的国家/地区示例

 1@2,3@4,5

功能状态（目标）{ var country = $（“＃country option：selected”）。val（）; $ .ajax（{ 类型：“ GET”， url：“ url /” +国家/地区， dataType：“文本”，成功：功能（数据）{ if（data！=''）{ $（'＃'+）。html（data）; } } }）; }

Answer 3

在第一个下拉列表中，添加另一个data- *属性“ cascade-list-id”。

@Html.DropDownListFor(model => item.JobConstructionManagerId, (SelectList)newSelectList, new { @class = "form-control js-select js-noFilter hidden DDConstructionManager", size = "2", @value = 0, Id = "JobConstructionManager" + t ,@OnChange="fill();" "data-cascade-list-id"="newSelectStaffList" + t}) //first dropdown

在fill方法中，获取书包列表ID，并将新数据与ID引用绑定。

// pseudo code
function fill() {
    var _that = this;
    var cascadeId = $(_that).attr("data-cascade-list-id") // or use .data("cascadeListId");

    // code to get the new data and binding, omitted for brevity
}

希望这对您有所帮助。

如何使用另一个下拉值填充下拉列表

3 个答案: