Adding items to a select dropdown via jquery is not succeeding

Question

I am trying to populate items in a drop down list dynamically using jquery in ASP.NET MVC.

This is my view code :

<select id="StartLocation" class="custom-select", onchange = "highlightMarkerById(this.value,0)">
    <option value="">-Start Location-</option>
</select>

This is the function I call to get the data :

function GetLocations() {
    $.ajax({
        type: "POST",
        url: "/MV/GetLocations",
        dataType: "json",
        success: function (data) {
            for (var j = 0; j < data.length ; j++) {
                $('#StartLocation').append($('<option>', {
                    value: data[j].Value,
                    text: data[j].Text
                }));
            }
        },
        error: function () {
            return "error";
        }
    });
}

In MV Controller, I have the GetLocations action method as follows :

[HttpPost]
public JsonResult GetLocations()
{
    List<vlocation> locationslist = DBManager.Instance.GetLocations();
    List<SelectListItem> locations = new List<SelectListItem>();
    foreach(var loc in locationslist)
    {
        locations.Add(new SelectListItem { Value = loc.displayName, Text = loc.displayName });
    }

    return Json(locations);
}

I debugged in chrome and found that the success is reached and the for loop is also being iterated. But I can't figure out why the items are not being added to the drop down. If I use the same code to add some items to the drop down other than inside the success , the items are being added. Any help would be appreciated.

Answer 1

May be try to iterate over your json as follows,

var optionAppend = '';
$.each(data,function(i,el){
   optionAppend += '<option value="'+el.Value+'">'+el.Text+'</option>';
});

$('#StartLocation').append(optionAppend);

Answer 2

You can try this:

 for (var j = 0; j < data.length ; j++) {
                $('#StartLocation').append("<option value="+data[j].Value+" >"+data[j].Text+"</option>");
            }

Answer 3

Please try :-

for (var j = 0; j < data.length ; j++) {
   $("#StartLocation").append($('<option></option>').val(data[j].Value).html(data[j].Text));
}

Answer 4

Because we do not have full code of the page, it is hard to say why it is not working. But please check if following is one of your cases.

1. You have several HTML elements with same id "StartLocation" in your document.

2. Select actually has new option element, but because you have customized select box (like select2 or any other plugin to make Select looks beautiful), the newly skinned Select is not affect by source Select yet. You need to trigger some events to let the plugin know Select has been changed.

Answer 5

You can try this:

[HttpPost]
public JsonResult GetLocations()
{
    List<vlocation> locationslist = DBManager.Instance.GetLocations();
    List<SelectListItem> locations = new List<SelectListItem>();
    foreach(var loc in locationslist)
    {
        locations.Add(new SelectListItem { Value = loc.displayName, Text = loc.displayName });
    }

    return Json(new SelectList(locations, nameof(SelectListItem.Value), nameof(SelectListItem.Text)););
}

Answer 6

当我评论“owl.carousel.min.js”或删除它时，我解决了这个问题。

 @*<script src="~/Scripts/js/owl.carousel.min.js"></script>*@