Get started with ajax-bootstrap-select CDN
MIT licensed
AJAX-Bootstrap-Select is a plugin that enables asynchronous populating of Bootstrap-Select dropdowns using AJAX requests.
Tags:- bootstrap
- bootstrap-select
- ajax
Stable version
Copied!
How to start using ajax-bootstrap-select CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with ajax-bootstrap-select CDN - cdnhub.io</title>
<!-- Add Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Add AJAX Bootstrap Select CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.3/dist/css/bootstrap-select.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<select class="form-control ajax-select" id="country-select">
<option value="">Select a country</option>
</select>
<ul id="state-list" class="list-group mt-3">
</ul>
</div>
<!-- Add AJAX Bootstrap Select JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.3/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.cdnhub.io/ajax-bootstrap-select/1.4.5/js/ajax-bootstrap-select.min.js"></script>
<script>
$(document).ready(function() {
// Initialize AJAX Bootstrap Select
$('.ajax-select').selectpicker();
$('.ajax-select').ajaxSelect({
url: 'https://api.example.com/countries', // Replace with your API endpoint
method: 'GET',
multiple: false,
placeholder: 'Select a country',
onload: function(data) {
// Clear ul list
$('#state-list').empty();
// Loop through the data and append options to ul list
data.forEach(function(item) {
$('#state-list').append('<li class="list-group-item" data-value="' + item.id + '">' + item.name + '</li>');
});
},
onchange: function(selectedItem) {
// Fetch states based on selected country
const countryId = selectedItem.value;
fetch('https://api.example.com/states?country_id=' + countryId)
.then(response => response.json())
.then(data => {
// Clear ul list
$('#state-list').empty();
// Loop through the data and append options to ul list
data.forEach(function(item) {
$('#state-list').append('<li class="list-group-item" data-value="' + item.id + '">' + item.name + '</li>');
});
});
}
});
});
</script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!