Uncaught TypeError: select2 is not a function问题求助

我遇到了Uncaught TypeError: select2 is not a function错误，Select2组件无法正常工作，仅显示原生多选下拉框。我已尝试Stack Overflow上同类问题的所有解决方案，但仍未解决。

已尝试的方案包括：

• 正确调整引入库的顺序
• 检查jQuery是否被阻塞
• 排查Select2代码是否存在问题
• 为jQuery代码添加defer属性

我已尝试上述所有方法，但仍不清楚问题所在。控制台报错显示select2 is not a function。

以下是我的Select2代码，该组件位于通过AJAX加载的模态框中：

below are my select2 code. actually, my select2 is in a modal. Im creating ajax to show what in my modal popup.

<!DOCTYPE html>

<head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script>  
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

</head>


<body>



    <div class="assistants" id="multipleassist">
    <label for="Job_assistant">Assistants :</label>
    <div class="input-box" style="width: 432px;">
    <input type="text" id='Job_assistant' class="form-control" value="<?php echo $row['Job_assistant']?>" readonly>      
   
    <br/>

    <select name="Job_assistant[]" class="form-control multiple-assistant" multiple="multiple">
        
    <option disabled value="">--Select Assistant--</option>
        <?php
        $con = mysqli_connect("localhost","root","","");
        $query = "SELECT staffregister_id, username, staff_position, tech_avai FROM staff_register WHERE staff_position = 'technician' OR staff_position = 'General Worker' ORDER BY staffregister_id ASC";
        $query_run = mysqli_query($con, $query);
        if(mysqli_num_rows($query_run) > 0)
        {
            foreach ($query_run as $rowstaff){

                ?>

                            
                <option value="<?php echo $rowstaff["username"]; ?>"><?php echo $rowstaff["username"]; ?></option>
                <?php  

            }
        }
        else
        {
            echo "No Record Found";
        }
        ?>

</select>
 </div>

<script>

$("#multipleassist").on('change', function () {
    
$(".multiple-assistant").select2({

});

});

</script>

以下是管理页面中模态框的AJAX代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Admin Homepage</title>
    <link rel = "icon" href = "https://i.ibb.co/ngKJ7c4/android-chrome-512x512.png" type = "image/x-icon">
    <link href="css/homepage.css"rel="stylesheet" />
    <link href="css/adminhomepage.css"rel="stylesheet" />
    <link href="css/adminboard.css"rel="stylesheet" />
    <link href="css/admin.css"rel="stylesheet" />
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script>  
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    
    <script src="https://code.iconify.design/2/2.2.1/iconify.min.js"></script>
    <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
    <script src="https://kit.fontawesome.com/cd421cdcf3.js" crossorigin="anonymous"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">

   </head>

<body>      
    
    <!-- Job Listing -->
    
    <div class="box" id="myModal">
        <div class="box_topic">Job Listing</div>
    
        <?php include 'con.php';?>
    
        <div class="todo" data-id="<?php echo $row['jobregister_id'];?>" data-target="doubleClick-1"
            ondblclick="document.getElementById('doubleClick-1').style.display='block'">
            <input type="hidden" name="jobregister_id" id="jobregister_id" value="<?php echo $row['jobregister_id'] ?>"
                readonly>
            <ul class="b" id="draged">
                <strong text-align="center">
                    <?php echo $row['job_order_number']?>
                </strong>
              
            </ul>
        </div></div>
                    
        <!-- Job Listing Popup Modal -->

        <div id="doubleClick-1" class="modal">
        <div class="tabs">
        <input type="radio" name="tabDoing" id="tabDoingOne" checked="checked">
        <label for="tabDoingOne" class="tabHeading">Job Info</label>
        <div class="tab" id=jobInfoTabs>
        <div class="TechJobInfoTab">
        <div class="contentTechJobInfo">
        <div style="right: 507px; top: -53px;" class="techClose" data-dismiss="modal" onclick="document.getElementById('doubleClick-1').style.display='none'">&times;</div>
        <form method="post">
        <div class="tech-details">

        </div></form></div></div></div>
        
                     

        <script type='text/javascript'>
            $(document).ready(function() {
            $('.todo').click(function() {
            var jobregister_id = $(this).data('id'); 
            // AJAX request 
            $.ajax({
                url: 'jobassignADMIN.php',
                type: 'post',
                data: {jobregister_id: jobregister_id},
                success: function(response) {
        
                $('.assign-details').html(response);
               $('#doubleClick-1').modal('show');
                                        }
                                    });
                                });
                            });
       </script>

</section>

</body>
</html>

感谢您的理解与帮助，非常感激。

内容的提问来源于stack exchange，提问作者teachmelearning