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

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

在您的第一个下拉列表中，添加另一个 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方法中，获取cascase list 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
}

希望对你有所帮助..

Answer 3

我给你一个国家/地区的例子，你可以使用这个概念

<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({ 类型：“获取”， 网址：“网址/”+国家， 数据类型：“文本”， 成功：函数（数据）{ 如果（数据！=''）{ $('#'+).html(数据); } } }); }