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
– Murtaza Khursheed Hussain, Commented Nov 23, 2015 at 7:41
did you placed your user data within <option></option> tags.. — Manoj Salvi
– Manoj Salvi, Commented Nov 23, 2015 at 7:44
As I said it gets the data but This section does not bind that data // $("#userDropDown").val(user); $("#userDropDown").text(user); //$("#userDropDown").html(user); — user3515453
– user3515453, Commented Nov 23, 2015 at 7: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? — user3559349
– user3559349, Commented Nov 23, 2015 at 7:44

Tech Savant · Accepted Answer · 2015-11-23 07:55:11Z

1

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

edited Nov 23, 2015 at 7:55

answered Nov 23, 2015 at 7:46

Tech Savant

3,7671 gold badge21 silver badges40 bronze badges

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

Comments

madalinivascu · Accepted Answer · 2015-11-23 08:00:26Z

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, 2015 at 8:00

answered Nov 23, 2015 at 7:49

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

3 Comments

user3515453 Over a year ago

Well this has done some thing but I can't see any thing the dropdown is still empty do i need to add <option> tag within <select> tag or will work without it

user3515453 Over a year ago

what is that I was doing wrong can i get an answer for that

madalinivascu Over a year ago

you need to append a option tag for each json object from your array and you are getting the keys wrong

Collectives™ on Stack Overflow

javascript does not bind the data to HTML Select element

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related