如何使用来自 json 对象的数据填充 "multiselect"？

Question

我似乎无法使用来自 json 对象的数据填充多选字段。无论我使用哪种多选，它都无济于事。数据显示在检查模式下，但未显示在 fontend 中。它应该是这样的。

但它是这样的。没有选项。

我的 html 代码：

<div>
   <span>Tags</span>
   <select id="choices-multiple-remove-button" placeholder="Select upto 5 tags"   name="tags" multiple></select>
</div>

我的js代码：

    success: function (data) {
    console.log(data);

    $.each(data, function (index, value) {
        var tagOption = ('<option value=' + value.Id + '>' + value.Name + '</option>');
        console.log(value.Name);
        $('#choices-multiple-remove-button').append(tagOption);

    });


    $(document).ready(function () {
        var multipleCancelButton = new Choices('#choices', {
            removeItemButton: true,
            maxItemCount: 5,
            searchResultLimit: 1,
            renderChoiceLimit: 2
        });
    });

我的json数据：

  {
    "Id": 1,
    "Name": "Tasty",
    "TimeStamp": null,
    "FOodOrTravel": 1
  },
  {
    "Id": 2,
    "Name": "Smells Bad",
    "TimeStamp": null,
    "FOodOrTravel": 1
  },
  {
    "Id": 3,
    "Name": "Spicy",
    "TimeStamp": null,
    "FOodOrTravel": 1
  },
  {
    "Id": 4,
    "Name": "Expensive",
    "TimeStamp": null,
    "FOodOrTravel": 1
  }

console.log（数据）

Answer 1

$(document).ready(function () {
            $.ajax({
                
                url: 'https://codeforces.com/api/user.blogEntries?handle=Fefer_Ivan',
                method: 'GET',

                success: function (data) {
                    

                    $.each(data.result, function (index, value) {
                        var tagOption = ('<option value=' + value.id + '>' + value.title + '</option>');
                        
                        $('#choices-multiple-remove-button').append(tagOption);

                    });
                    var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
                removeItemButton: true,
                maxItemCount: 5,
                searchResultLimit: 5,
                renderChoiceLimit: 5
            });

                },
                error: function (jQXHR) {
                    if (jQXHR.status == "401") {
                        $('#errorModal').modal('show');
                    }
                    else {
                        $('#divErrorText').text(jqXHR.responseText);
                        $('#divError').show('fade');
                    }
                }
            });
            
        });

.mt-100 {
    margin-top: 100px
}

body {
    background: #00B4DB;
    background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);
    background: linear-gradient(to right, #0083B0, #00B4DB);
    color: #514B64;
    min-height: 100vh
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006288/BBBootstrap/choices.min.css?version=7.0.0">
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006273/BBBootstrap/choices.min.js?version=7.0.0"></script>
<div class="row d-flex justify-content-center mt-100">
    <div class="col-md-6"> <select id="choices-multiple-remove-button" placeholder="Select upto 5 tags" multiple>
    
        </select> </div>
</div>

这是您的代码的工作示例。试试这个。这就是你想要的> 最后:)

[https://jsfiddle.net/mjg7r1q0/49/]

你用过

var multipleCancelButton = new Choices('#choices', {

你必须使用

var multipleCancelButton = new Choices('#choices-multiple-remove-button', {

这里是同步方法。因为脚本在 aync 方法 result

之前运行

https://jsfiddle.net/2bqp8zxo/2/

$(document).ready(function () {
            $.ajax({
                
                url: 'https://codeforces.com/api/user.blogEntries?handle=Fefer_Ivan',
                method: 'GET',
                async: false,
                success: function (data) {
                    

                    $.each(data.result, function (index, value) {
                      
                        var tagOption = ('<option value=' + value.id + '>' + value.title + '</option>');
                        
                        $('#choices-multiple-remove-button').append(tagOption);

                    });
                    

                },
                error: function (jQXHR) {
                    if (jQXHR.status == "401") {
                        $('#errorModal').modal('show');
                    }
                    else {
                        $('#divErrorText').text(jqXHR.responseText);
                        $('#divError').show('fade');
                    }
                }
            });
            var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
                removeItemButton: true,
                maxItemCount: 5,
                searchResultLimit: 5,
                renderChoiceLimit: 5
            });
        });

.mt-100 {
    margin-top: 100px
}

body {
    background: #00B4DB;
    background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);
    background: linear-gradient(to right, #0083B0, #00B4DB);
    color: #514B64;
    min-height: 100vh
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006288/BBBootstrap/choices.min.css?version=7.0.0">
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006273/BBBootstrap/choices.min.js?version=7.0.0"></script>
<div class="row d-flex justify-content-center mt-100">
    <div class="col-md-6"> <select id="choices-multiple-remove-button" placeholder="Select upto 5 tags" multiple>
    
        </select> </div>
</div>

如何使用来自 json 对象的数据填充 "multiselect"？

How to populate "multiselect" with data coming from json object?

javascript

multi-select

bootstrap-multiselect

bootstrap-4