How to fill dropdown using JQUERY on partial View dropdown html

Question

PArtial view html select dropdown not filling using jquey, how to fill using jquery ?

Jignesh Kumar · Answer

Hello, Please check step by step : Create main view and include partial view inside main view: @{ ViewBag.Title = "Index"; } Index @Html.Partial("_DropdownPartial", Model.DropdownItems) Create partial view with dropdown : @model IEnumerable Select an option @foreach (var item in Model) { @item.Text } Write Jquery function to fetch data from your controller action method, $(document).ready(function() { function populateDropdown() { $.ajax({ url: '@Url.Action("GetDropdownData", "Home")', // URL to fetch data type: 'GET', success: function(data) { var dropdown = $('#myDropdown'); dropdown.empty(); // Clear existing options dropdown.append(' Select an option '); // Add default selection option // Loop through the data and append options in your dropdonw $.each(data, function(index, item) { dropdown.append($(' ', { value: item.Value, text: item.Text })); }); }, error: function(xhr, status, error) { console.error('Failed to fetch data: ' + error); } }); } // Call the function to populate the dropdown populateDropdown(); }); Create a Database call to get data and send to jquery call: public class HomeController : Controller { public ActionResult Index() { // Pass an empty list initially var model = new YourViewModel { DropdownItems = new List () }; return View(model); } [HttpGet] public JsonResult GetDropdownData() { // Fetch your data from a database or any other source as per your requirement // Here I have created sample data var items = new List { new SelectListItem { Value = "1", Text = "Value 1" }, new SelectListItem { Value = "2", Text = "Value 2" }, new SelectListItem { Value = "3", Text = "Value 3" } }; return Json(items, JsonRequestBehavior.AllowGet); } } Please follow above step carefully your data will load into your dropdown

Vishal Yelve · Answer

Hi Asht, --- Controller [HttpGet] public ActionResult GetCities(int stateId) { var cities = db.Cities.ToList(); List cityList = new List (); foreach (City city in cities) { cityList.Add(new SelectListItem { Text = city.CityName, Value = city.CityId.ToString() }); } ViewBag.City = cityList; return View("_City"); } partial View @Html.LabelFor(model => model.CityName, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.DropDownListFor(model => model.CityName, (IEnumerable )ViewBag.City, "Select City", new { @class = "form-control col-md-3", @id = "ddlCities" }) --- View page function GetCity() { $.ajax({ url: '@Url.Action("GetCity", "Home")', dataType: "html", type: "GET", contentType: "application/json", success: function (response) { $('#partialCityView').html(response); }, error: function (err) { alert(err.responseText); } }); }

How to fill dropdown using JQUERY on partial View dropdown html

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (2)