使用jQuery中的foreach循环在Select2中不加载数据

Question

我正在尝试使用foreach循环将数据加载到select2。

码：

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

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

由此，我得到了清单。 这些值将进入foreach循环，但不会附加到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>'`;

在这里，我正在使用select2并从数据库中获取选定的值。 它仅显示选定值，而不显示select2中的所有值。 我想获取所有值，并在可能的情况下也要选择。 关于如何获取select2中所有值以及从db中选择值的任何建议。 提前致谢。

Answer 1

您可以像下面那样填充select2从控制器方法中以ajax的形式获取数据

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

另一种方法是现有的Select2具有使用ajax填充选项的选项，如下所示。

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

是的，对于此选项，您的响应会自动绑定到select2，如下所示

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

我只是在下面的示例中放下了返回json的操作方法，如下所示，

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

我希望它将对您有所帮助。