Как заполнить "multiselect" данными, поступающими из объекта json?

ProgramBox

Как заполнить «multiselect» данными, поступающими из объекта json?

Post author:admin
Запись опубликована:18 марта, 2023
Post category:Вопросы по программированию

#javascript #bootstrap-4 #multi-select #bootstrap-multiselect

#javascript #bootstrap-4 #множественный выбор #bootstrap-multiselect

Вопрос:

Кажется, я не могу заполнить поле multiselect данными, поступающими из объекта json. Это не помогает независимо от того, какой multiselect я использую. Данные отображаются в режиме проверки, но не отображаются в 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(данные)

1. Попробуйте изменить имя на name="tags[]"

2. Нет, это не работает.

3. Пожалуйста, сбросьте data .

4. не могли бы вы немного объяснить это, пожалуйста. Я новичок в этих терминах.

5. Попробуйте: var tagOption = » Идентификатор «‘>» значение. Имя «</option>»;

Ответ №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 приводят

 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>

1. На самом деле это не то, чего я ожидаю. Я ожидаю, что в списке будут отображаться элементы, и я смогу выполнить их поиск и выбрать несколько элементов без использования клавиши «ctrl». Аналогично этому. bbbootstrap.com/snippets/multiselect-dropdown-list-83601849

2. @Ahmed это нормально?

3. Да, это то, что я хочу. В вашем случае это работает как прелести. Но мой код такой же, как и ваш, но данные не поступают. может быть, это потому, что я извлекаю данные через api внутри блока .ajax?

4. pastebin.ubuntu.com/p/WYCvq7Jd2c вот оно. внутри js-скрипта.

5. @Ahmed не могли бы вы показать мне свой результат? И вы использовали console.log(value.Name); это. каков вывод этой строки?