使用 AJAX 填充 Jquery 多选

Question

我正在尝试从从 ajax 调用中检索到的值列表中填充 Jquery MultiSelect。 目前，调用成功，但 Multiselect 没有填充任何内容，并且 html 中没有存储任何值。 有人介意帮我解决这个问题吗？ 我一直在寻找其他答案，但找不到与我的足够相似的答案。

Ajax function

function loadProjects(office_id){
    var $select = $("#Projects").multiselect(); // Apply multiselect
    $select.multiselect('disable'); //disable it initially
    $.ajax({
        url: "/api/Projects/" + office_id,
        type: "POST",
        dataType: "json",
        success: function(data){
            console.log(data);
            $('#Projects').multiselect('enable');
            $('#Projects').empty();
            // $('#Projects').append('<option value="">Select a Project</option>');
            if (data.length  == 0){
                $('#Projects').append("<option class='text-danger' value='0' disabled> No Projects under this Chief.</option> ");
                $('#Projects').append("<option class='text-danger' value='0' disabled> Enter the Project manually.</option> ");
            }
            else{
                // Populate Projects box.
                var i;
                for(i=0; i< data.length;i++)
                {
                    var option = "<option value='" + data[i].project_id + ">" + data[i].project_name +  " </option>";
                    // console.log(option);
                    $('#Projects').append(option);
                    // $("#Projects").multiselect("rebuild");
                }
                $("#Projects").attr('multiple', 'multiple'); 
                $("#Projects").multiselect('rebuild');
            }
            
            

        }
    })
    
}

头部标签

<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{url_for('static',filename='css/styles.css')}}"> 
    <!-- AJAX/ JQUERY -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <!-- Multiselect -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />

<select class="form-select select select-Projects" id="Projects" name="Projects"  ></select>

来自 ajax 呼叫的响应

[
    {
    "office_id": xxx,
    "project_id": xxx,
    "project_name": "xxxxxxxx",
    "CE_name": "xxxxxxxxxx",
    "CE_unit": "xxx",
    "CE_EFIS": "xxxx",
    "district_id": xx
},
]

Answer 1

你在这一行有一个错字：

var option = "<option value='" + data[i].project_id + ">" + data[i].project_name +  " </option>";

您缺少结束撇号：

var option = "<option value='" + data[i].project_id + "'>" + data[i].project_name +  " </option>";

此外，您指的是data[i].project_id和data[i].project_name但这些键（ project_id和project_name ）不会出现在您提供的示例数据中。