ASP.NET MVC Empty Select when Fill a Select/Option from Json with jQuery

Question

Needed help here

This is my Model

public class SelectOption
{
    public String Value { get; set; }
    public String Text { get; set; }
}

Sample Method

public JsonResult GetJson()
{
    var list = new List<SelectOption>
                   {
                       new SelectOption { Value = "1", Text = "Aron" },
                       new SelectOption { Value = "2", Text = "Bob" },
                       new SelectOption { Value = "3", Text = "Charlie" },
                       new SelectOption { Value = "4", Text = "David" }
                   };
    return Json(list);
}

View

<script type="text/javascript">

    $(document).ready(function() {
        $.getJSON("/Json/GetJson", null, function(data) {
            $("#MyList").addItems(data);
        });
    });

    $.fn.addItems = function(data) {
        return this.each(function() {
            var list = this;
            $.each(data, function(index, itemData) {
                var option = new Option(itemData.Text, itemData.Value);
                list.add(option);
            });
        });
    };

    $("#MyList").change(function() {
        alert('you selected ' + $(this).val());
    });

</script>

The above code doesnt have any error it's just that when everything is loaded, the Select/Dropdownlist will have 4 Empty Values, meaning that I can click on the DDL and there's 4 values, however it is empty string for all fours.

Anyone know why?

Thanks

Ziregbe Otee · Accepted Answer · 2018-05-05 13:15:42Z

2

Here is another way to implement:

Sample Index View and Complete JQuery:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


<select id="MyList">

</select>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>

 $(function () {

        LoadList();

    });

function LoadList() {

        var procemessage = "<option value=''> Please wait...</option>";

        $("#MyList").html(procemessage).show();


        $.ajax(

                   {
                       url: "@Url.Action("GetJson", "Test")" ,
                    type: "GET",

                    success: function (data) {

                    var markup = "<option value=''>-Select Option-</option>";

                    for (var x = 0; x < data.length; x++) {

                    markup += "<option value=" + data[x].Value + ">" +
                        data[x].Text + "</option>";

                    }

                    $("#MyList").html(markup).show();

                    },

                    error: function (reponse) {
                    alert("error : " + reponse);
                    }

                    });

                    }

</script>

Controller:

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;

namespace stackoverflow.Controllers
{
    public class TestController : Controller
    {
        // GET: Test
        public ActionResult Index()
        {
            return View();
        }


        [HttpGet]
        public JsonResult GetJson()
        {
            var list = new List<SelectOption>
                   {
                       new SelectOption { Value = "1", Text = "Aron" },
                       new SelectOption { Value = "2", Text = "Bob" },
                       new SelectOption { Value = "3", Text = "Charlie" },
                       new SelectOption { Value = "4", Text = "David" }
                   };

            return Json(list, JsonRequestBehavior.AllowGet);

        }
    }
}

Select Option Model:

public class SelectOption { public string Text { get; set; } public string Value { get; set; } }

edited May 5, 2018 at 13:15

answered May 5, 2018 at 12:19

Ziregbe Otee

5543 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sarah Over a year ago

Thank you, but the value is 'Undefined', any idea why?

Ziregbe Otee Over a year ago

does it throw an error? does your dropdown load with undefined?

Sarah Over a year ago

Thanks for your help. No error, the dropdown load with undefined

Ziregbe Otee Over a year ago

Ok i just tried and it work. I'll updated my response to include the view.

Sarah Over a year ago

Thanks a lot for your help!

Collectives™ on Stack Overflow

ASP.NET MVC Empty Select when Fill a Select/Option from Json with jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related