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

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處理下拉列表的change事件以填充第二個下拉列表。

<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

我給你國家的例子，你可以使用這個概念

<select name="country" id="country" onchange="states('state')">


<option value="">Select Country</option>
    <option value="1">Afghanistan</option>
    <option value="2">Albania</option>
    <option value="3">Algeria</option>
</select>

<select name="state" id="state">
<option value="">Select State</option>

功能狀態（目標）{var country = $（“＃country option：selected”）。val（）; $ .ajax（{type：“ GET”，url：“ url /” + country，dataType：“ text”，成功：function（data）{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
}

希望這對您有幫助。