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!

All versions