I have a searchable dropdown in file “index.php” and I am trying to populate the dropdown options using jQuery. Using jQuery I am making an ajax request to fetch data from mySQL database through file “get_states.php”.
index.php is like this :
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]
rc.1/dist/js/select2.min.js"></script>
<script>
// Initialize Select2 to load dropdown dynamically
$(document).ready(function() {
$('.select2').select2({
placeholder: 'Search for a state',
ajax: {
url: 'get_states.php', // PHP script to fetch states dynamically
dataType: 'json',
delay: 250,
processResults: function(data) {
return {
results: data
};
},
cache: true
}
});
});
Also from the same index.php file I am making a different ajax request through xhr object to execute “code.php” .However I am getting this error “jQuery.Deferred exception: $(…).select2 is not a function TypeError: $(…).select2 is not a function
at HTMLDocument.”
I want the getstates.php to execute and get the data from database.