Bootstrap Select2 doesnt work inside model, how to make it work?

Question

When i run the code outside the model it work perfectly.But when i put it inside the modal, I cant search the items.

  <div class="modal-body">
            <form class="form-horizontal">
                <div class="panel panel-success">
                    <div class="panel-body">

                        <div class="row">
                            <div class="form-group">
                                <label for="txt_ShapeNote" class="col-sm-3 control-label">Bootstrap Select2 :</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="select2" style="width: 300px; width: 100px">
                                        <option value="1">Cats</option>
                                        <option value="2">Dogs</option>
                                        <option value="3">Fish</option>
                                        <option value="4">Reptiles</option>
                                        <option value="5">Equine</option>
                                        <option value="6">Aviary</option>
                                        <option value="7">Insects</option>
                                    </select>
                                </div>
                            </div>
                        </div>

---

Im using this script and css

 <link href="~/Content/Select2/css/select2.css" rel="stylesheet" />
 <script src="~/Content/Select2/js/select2.js"></script>

---

in javascript

 $('#select2').select2();

Answer 1

If you have a script creating your select box, you have to run that script once your modal has loaded. Assuming this is Bootstrap 3:

$('#modal-body').on('shown.bs.modal', function() {
    $('.form-control').select2();
});

This is assuming you are running Bootstrap 3. You can see more about the shown event here: Bootstrap modal show event