Javascript Select2在引导模式下不工作

我读了这个问题，但并没有从中得到任何答案

我的引导模式HTML如下所示

<div class="modal fade" id="modelId" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">                
            <div class="modal-body">
                <div class="container-fluid">
                    <form role="form" action="task">
                        <div class="row">
                            <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
                                <option value="example1">example1</option>
                                <option value="example2">example2</option>
                                <option value="example3">example3</option>
                                <option value="example4">example4</option>
                                <option value="example5">example5</option>
                                <option value="example6">example6</option>
                            </select>

例1
例2
例3
例4
例5
例6

我使用下面的代码添加了select2的CSS和JS

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.11/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.11/js/select2.min.js"></script>

我在我的HTML页面中使用下面的JS代码

<script>
    $(document).ready(function() {
        $('.js-example-basic-multiple').select2({
            placeholder: 'Select an option'
        });
    });
</script>

$（文档）.ready（函数（）{
$（'.js示例基本多个'）。选择2({
占位符：“选择一个选项”
});
});

我正在使用下面的jQuery链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

但我得到的输出如下

<div class="modal fade" id="modelId" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">                
            <div class="modal-body">
                <div class="container-fluid">
                    <form role="form" action="task">
                        <div class="row">
                            <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
                                <option value="example1">example1</option>
                                <option value="example2">example2</option>
                                <option value="example3">example3</option>
                                <option value="example4">example4</option>
                                <option value="example5">example5</option>
                                <option value="example6">example6</option>
                            </select>

---

初始化时请尝试此代码选择2：

  obj.select2({
 dropdownParent:obj.parent(), ///  HOLDER DIV - FOR Z-INDEX ISSUES   

---

在初始化select2时尝试此代码：

  obj.select2({
 dropdownParent:obj.parent(), ///  HOLDER DIV - FOR Z-INDEX ISSUES   

---

请试试这个例子

有关更多详细信息，请单击此处工作演示

Html代码

---

请试试这个例子

有关更多详细信息，请单击此处工作演示

Html代码