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

Question

I have few drop-down list here as shown in , based on this drop-down selection next drop-down to it should be populated.. i tried to use this keyword to get value of current drop-down but i am unable to get it.

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

main problem is that how to get just next drop-down to some particular drop-down

Answer 1

You must give an id attribute to your first dropdownlist then handle change event of dropdown with jquery to populate second dropdown.

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

and then create an action method in your controller to populate second dropdown and return in json format.

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

Answer 2

I am giving you the country state example you can use this concept

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

function states(target){ var country = $("#country option:selected").val(); $.ajax({ type: "GET", url: "url/"+country, dataType: "text", success: function(data){ if(data !=''){ $('#'+).html(data); } } }); }

Answer 3

In your first dropdown list, add another data-* attribute "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

In fill method, get the cascase list id, bind the new data with the id reference.

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

Hope this helps you..