javascript does not bind the data to HTML Select element

Question

I've this select element of html5 or Dropdown. I'm using c# to fetch data from database which it is getting correctly. when I try to bind that data fetched from db to select element using java script it just don't do that. I can get all the UserNames in a java script variable but when I try to bind that to dropdown/select element it just does not appear

My C# Method in MVC controller is

 public JsonResult GetUsersList()
    {
       // var userList= new List<>
        var userList = _db.UserInfromations.ToList();
        return Json(userList, JsonRequestBehavior.AllowGet);
    }

My select element

<select id="userDropDown" required name="userDropDown"></select>

and my java script I'll add my all tries that I've don so far.. created separate function for success and all but noting works

 jQuery(document).ready(function () {
   // debugger;

    $.ajax({
        type: "GET",
        url: "/User/GetUsersList",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
    })
        .success(function (data) {
            var userName = data.UserName;
            $("#userDropDown").val(userName);
            return false;
        })
        .error(function () {
            window.ajaxErrorMessage();
        });
}(jQuery));

The separate Success function

 function displayUser(response) {
    var getData = response;
    if (getData.length > 0) {
        var user = "";
       // user = "";
        for (var i = 0; i < getData.length; i++) {
            user += " " + getData[i].UserName ;
        }
       // $("#userDropDown").val(user);
        $("#userDropDown").text(user);
        //$("#userDropDown").html(user);
    }
}

use console.log on success and check what response is coming — Murtaza Khursheed Hussain, Nov 23 '15 at 07:41
As I said it gets the data but This section does not bind that data // $("#userDropDown").val(user); $("#userDropDown").text(user); //$("#userDropDown").html(user); — , Nov 23 '15 at 07:44
Your sending back a array of `UserInfromations`. You cannot set the value of a dropdownlist to an array of complex objects. Are you trying to add options to the dropdownlist based on the values of each `UserInfromations`? — , Nov 23 '15 at 07:44
Yes @StephenMuecke as you can see I just want to get user name , the method of c# works fine — , Nov 23 '15 at 07:45
You must create options-tags. Look at this http://stackoverflow.com/questions/317095/how-do-i-add-options-to-a-dropdownlist-using-jquery — Daniel Stackenland, Nov 23 '15 at 07:45
I also get a proper JSON responce http://prntscr.com/95wegs @madalinivascu — , Nov 23 '15 at 07:46
Refer [this answer](http://stackoverflow.com/questions/28627421/better-way-to-load-2-dropdown-in-mvc/28640420#28640420) for generating options. But do not send back `_db.UserInfromations.ToList();` - instead just send what you need - e.g. `_db.UserInfromations.Select(x => x.UserName);` — , Nov 23 '15 at 07:48
I posted an answer (before the other guy BTW), and it should work, let me know if it doesn't. Please see here about how to accept an answer on StackOverflow ... http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work — Tech Savant, Nov 23 '15 at 07:53
@NotoriousPet0 you didn't post full answer, happens to the best of us — madalinivascu, Nov 23 '15 at 08:01
Possible duplicate of [How to add option to select list in jquery](http://stackoverflow.com/questions/1730360/how-to-add-option-to-select-list-in-jquery) — Tech Savant, Nov 23 '15 at 08:01
I'm really sorry for that let me get some marks and I'll give you up :) — , Nov 23 '15 at 08:01

Tech Savant · Answer 1 · 2015-11-23T07:55:11.000

You will need to add it as an <option> to the select box. You also may need to parse the json.

Replace this ... $("#userDropDown").val(userName); with the code below:

$("#userDropDown").append($('<option/>', { 
        value: userName,
        text : userName 
}));

for multiple additions, use $.each(). You made need to also JSON.parse(data) to get it in the right format.

$.each(userName, function (index, value) {
    $('#userDropDown').append($('<option/>', { 
        value: value,
        text : value 
    }));
});

madalinivascu · Accepted Answer · 2015-11-23T08:00:26.877

0

You need to create a option tag for each json object from your array then select the property of each object try:

 jQuery(document).ready(function () {
       // debugger;

        $.ajax({
            type: "GET",
            url: "/User/GetUsersList",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
        })
            .success(function (data) {
               $.each(data,function(i,v){
                  $("#userDropDown").append($('<option/>', { 
            value: v.Id,
            text : v.UserName 
        })); 
    })

            })
            .error(function () {
                window.ajaxErrorMessage();
            });
    }(jQuery));

edited Nov 23 '15 at 08:00

answered Nov 23 '15 at 07:49

madalinivascu

32,064
4
39
55

Well this has done some thing but I can't see any thing the dropdown is still empty do i need to add – Nov 23 '15 at 07:52
what is that I was doing wrong can i get an answer for that – Nov 23 '15 at 07:57
you need to append a option tag for each json object from your array and you are getting the keys wrong – madalinivascu Nov 23 '15 at 07:58

javascript does not bind the data to HTML Select element

2 Answers2