"Implementing ASP.NET MVC4 with Razor: Dynamically filtering a dropdown list based on the selected value from another dropdown

Question

"Implementing ASP.NET MVC4 with Razor: Dynamically filtering a dropdown list based on the selected value from another dropdown

Currently, I am facing a challenge where I need to filter the options of a dropdown list based on the value selected from another dropdown. Within my database, there are tables containing all countries and all cities in the world, with a foreign key linking each city to its respective country.

Displayed below is a snippet from my view and webpage:

Additionally, here are excerpts from my controller methods: the GET method retrieving the page, loading all countries, and loading all cities within a specific country.

To achieve this functionality, I must handle the "onchange" event of the first dropdown list in order to dynamically update the options within the second dropdown list by triggering the LoadCities method in my controller and passing the value of the selected item from the first dropdown. Unfortunately, I'm unsure about how to proceed with this implementation.

Any assistance or guidance you can provide would be greatly appreciated!

UPDATE

I would like to express my gratitude to @Shyju for your valuable advice; however, I am still encountering issues with the functionality. As a student with limited expertise on this subject matter, I have included the results below: Upon examination, it appears that the Content-Length is 0, and the response panel remains empty. I am puzzled by the presence of an XML type and uncertain about the purpose of "X-Requested-With". Could someone please advise me on how to rectify these issues?

javascript jquery asp.net-mvc razor html.dropdownlistfor

Answer 1

Answer №1

Implement the onchange function (client side) for the initial selection and dynamically populate the second dropdown using an AJAX request.

Answer 2

Implement the onchange function (client side) for the initial selection and dynamically populate the second dropdown using an AJAX request.

Answer 3

Answer №2

When the first dropdown (Country) changes, you can listen to the change event, retrieve the value of the selected option, and then initiate an ajax call to your server to fetch the list of cities for that specific country.

$(function(){

  $("#Country").change(function(){

     var countryId = $(this).val();
     var url = "@Url.Action("LoadCities,"Country")"+countryId;

     $.getJSON(url,function(data){

         var options="";
         $.each(data,function(a,b){
           options+="<option value='"+ b.Value +"'>" + b.Text + "</option>";
         });        
         $("#City").html(options);
     });

  });

});

Your LoadCities function should now return the city list as Json format.

public ActionResult GetCities(int id)
{
   // For demonstration purposes, I have hardcoded some city names.
   // You will need to replace this with code to fetch cities from your database table.
   var dummyCities = new List<SelectListItem>
   {
     new SelectListItem { Value="1", Text="Detroit"},
     new SelectListItem { Value="2", Text="Ann Arbor"},
     new SelectListItem { Value="3", Text="Austin"}
   };
   return Json(dummyCities,JsonRequestBehaviour.AllowGet);
}

Answer 4

When the first dropdown (Country) changes, you can listen to the change event, retrieve the value of the selected option, and then initiate an ajax call to your server to fetch the list of cities for that specific country.

$(function(){

  $("#Country").change(function(){

     var countryId = $(this).val();
     var url = "@Url.Action("LoadCities,"Country")"+countryId;

     $.getJSON(url,function(data){

         var options="";
         $.each(data,function(a,b){
           options+="<option value='"+ b.Value +"'>" + b.Text + "</option>";
         });        
         $("#City").html(options);
     });

  });

});

Your LoadCities function should now return the city list as Json format.

public ActionResult GetCities(int id)
{
   // For demonstration purposes, I have hardcoded some city names.
   // You will need to replace this with code to fetch cities from your database table.
   var dummyCities = new List<SelectListItem>
   {
     new SelectListItem { Value="1", Text="Detroit"},
     new SelectListItem { Value="2", Text="Ann Arbor"},
     new SelectListItem { Value="3", Text="Austin"}
   };
   return Json(dummyCities,JsonRequestBehaviour.AllowGet);
}

Answer 5

Answer №3

To implement the functionality, you can utilize either javascript or jquery OnChange method. Simply pass the ID of the first dropdown and utilize ajax to invoke the method by passing the dropdown ID.

<div class="ui-widget">
        <select id="pick">
            <option value="">Select one...</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>

        <select id="drop">
            <option value="">Select one...</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
        </select>
    </div>

$("#drop").change(function () {
        var end = this.value;
        var firstDropVal = $('#pick').val();
    });

Answer 6

To implement the functionality, you can utilize either javascript or jquery OnChange method. Simply pass the ID of the first dropdown and utilize ajax to invoke the method by passing the dropdown ID.

<div class="ui-widget">
        <select id="pick">
            <option value="">Select one...</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>

        <select id="drop">
            <option value="">Select one...</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
        </select>
    </div>

$("#drop").change(function () {
        var end = this.value;
        var firstDropVal = $('#pick').val();
    });

"Implementing ASP.NET MVC4 with Razor: Dynamically filtering a dropdown list based on the selected value from another dropdown

UPDATE

Answer №1

Answer №2

Answer №3

Similar questions

What could be the reason for my React/HTML select element occasionally failing to display the default selected value?

Loop through the array and eliminate the identification solely

Display various v-dialog boxes with distinct contents in a vue.js environment

Zod vow denial: ZodError consistently delivers an empty array

Having trouble making z-index work on a child div with absolute positioning

Utilize a single JavaScript file to handle various views without encountering errors due to undefined functions

Utilize viewport activation to determine browser width

Press the NOW button to set the server time using JQuery timePicker

Compiling with GatsbyJs throws an abrupt token error with 'if' being an unexpected token

Using jQuery to retrieve the values of two distinct sliders and executing a specific mathematical operation

Console displaying a 400 bad request error for an HTTP PUT request

Is it feasible to indent lines in a template without affecting the content alignment?

Is there a way to sort search outcomes by a drop-down menu in Next.js?

Integrating Python Script with User Input and Output within a JavaScript Web Application

The value of the jQuery data on click event handler becomes 'undefined' when used within an AJAX handler

What is the best way to incorporate JavaScript multiple times on a single webpage?

Tips for troubleshooting JavaScript errors in Internet Explorer 7 & 6 using Dreamweaver CS3

How to create select options in Angular.js without using the ng-option directive

What can be done to prevent divs from overlapping? They display properly on a computer browser, but not on mobile devices like phones or tablets

The operation is unable to be executed in an external document