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

Posted 2023-05-09

【中文标题】如何使用基于另一个下拉值填充下拉列表

【英文标题】：how to populate drop-down based on another drop-down value using

【发布时间】：2019-06-14 16:16:15

【问题描述】：

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

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

主要问题是如何让下一个下拉菜单进入某个特定的下拉菜单

【问题讨论】：

能否出示有问题的相关代码

检查我编辑的问题@lzzy

检查这个 - ***.com/questions/47717656/…

不，这并不能解决我的问题@iSahilSharma 我这里有多个带有动态 ID 的下拉列表

提供更多代码以供查看，例如 fill(); 方法

【参考方案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 ;

【讨论】：

我有一个 id ="JobConstructionManager"+t 其中 t 的值是动态的@Iman Nemati

【参考方案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

希望对你有所帮助..

【参考方案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(数据); );

【讨论】：

函数状态（目标） var country = $("#country option:selected").val(); $.ajax( type: "GET", url: "url/"+country, dataType: "text", success: function(data) if(data !='') $('#'+). html(数据); );

对不起。在此处附加动态 id，即 $('#'+target).html(data);