CODEWITHSUNDEEP
jqueryasp.net-mvcjquery-select2
Raees
Raees

Reputation: 1

Not Loading Data in Select2 using foreach loop in jquery

I am trying to load the data to select2 using a foreach loop.

Code:

var url = "@Url.Action("Listofservices","service")";

$.get(url, function (status, val) {
                              $.each(status, function (i, val) {
                                  $(".ser").select2("data", val.Name);
                              });
                           });

From this I am getting the list. The values are coming in foreach loop but not appending to select2.

 var tr = '<tr>';
                                   tr += `'<td>
                                    <select id="services" name="services" class="form-control select2 ser">
                                         <option value=`+val.ID +`>  `+ val.Name +`</option >
                                   </select>
                                </td>'`;

Here I am using select2 and am getting the selected value from database. It is showing only the selected value not all values in select2. I want to get the all values and selected also if possible. Any advice on how to get all the values in select2 and selected value from db. Thanks in advance.

Upvotes: 0

Views: 1525

Answers (1)

Lalji Dhameliya
Lalji Dhameliya

Reputation: 1769

you can fill your select2 like below get data as ajax from your controller method

<script>
    $('#services').select2();
    var url = "@Url.Action("Listofservices", "service")";
    selected();
    function selected() {
        $.get(url, function (response, status) {
            if (status == "success") {
                $.each(response.results, function (i, item) {
                    var selected = "";
                    if (item.selected) {
                        selected = true;
                    }
                    var option = '<option ' + selected +' value="' + item.id + '">' + item.text +'</option>';
                    $('#ddlListing').append(option)
                });
            }
        });
    }
</script>

other way is existing Select2 have option to fill option using ajax like below.

<script>
    var url = "@Url.Action("getlistings", "home")";
    $('#ddlListing').select2({
        ajax: {
            url: url
        }
    });
</script>

and yes for this option your response bind automatically to your select2 and it looks like below

{
  "results": [
    {
      "id": 1,
      "text": "Option 1"
    },
    {
      "id": 2,
      "text": "Option 2"
    },
    {
      "id": 3,
      "text": "Option 3"
    }
  ]
}

i have just example put below for action method that return json like below,

public IActionResult GetListings()
 {

            var data = new List<dynamic>();
            data.Add(new
            {
                Id = 1,
                Text = "aaa",
                selected = true,
            });
            data.Add(new
            {
                Id = 2,
                Text = "bbb",
                selected = false,
            });
            data.Add(new
            {
                Id = 3,
                Text = "ccc",
                selected = false,
            });
            return new JsonResult(new { results = data });
  }

i hope it will helps you thanks.

Upvotes: 1

Related Questions