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.

you're retrieving data...why `POST`?...probably the missing `;` as @ScanQR mention it is your problem. — Elmer Dantas, Dec 27 '16 at 10:24
@ScanQR : Corrected it. Still same issue. Response is Json only — ViVi, Dec 27 '16 at 10:25
@ViVi try to iterate over your json using $.each() as I have posted. — ScanQR, Dec 27 '16 at 10:32

ScanQR · Answer 1 · 2016-12-27T10:30:59.300

0

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

edited Dec 27 '16 at 10:30

answered Dec 27 '16 at 10:20

ScanQR

3,740
1
13
30

Still same. Everything works outside the `success` block. – ViVi Dec 27 '16 at 10:35
@ViVi can you show me complete code which works outside success? – ScanQR Dec 27 '16 at 12:00

score 0 · Answer 2 · answered Dec 27 '16 at 10:26

0

You can try this:

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

answered Dec 27 '16 at 10:26

Vishal J

344
3
10

Anand Systematix · Answer 3 · 2016-12-27T10:53:40.533

0

Please try :-

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

edited Dec 27 '16 at 10:53

answered Dec 27 '16 at 10:29

Anand Systematix

632
5
15

Can you post result of "data.length" and also structure of "data". – Anand Systematix Dec 27 '16 at 11:28

score 0 · Answer 4 · answered Dec 27 '16 at 10:29

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.

You have several HTML elements with same id "StartLocation" in your document.
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.

score 0 · Answer 5 · answered Dec 27 '16 at 12:04

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)););
}

score 0 · Answer 6 · edited Oct 08 '20 at 14:52

0

I solved this problem when I commented "owl.carousel.min.js" or removed it.

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

edited Oct 08 '20 at 14:52

General Grievance

4,555
31
31
45

answered Oct 08 '20 at 12:19

عبدالرحمن شافعى

29
3

Adding items to a select dropdown via jquery is not succeeding

6 Answers6

Linked