Country-Region DropDown Menu

Name: GeoDataSource
Brand: GeoDataSource
Sample Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Country-Region DropDown Menu</title>

        <!-- link for jquery style -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

        <!-- link for bootstrap style -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/css/bootstrap.min.css" integrity="sha512-fw7f+TcMjTb7bpbLJZlP8g2Y4XcCyFZW8uy8HsRZsH/SwbMw0plKHFHr99DN3l04VsYNwvzicUX/6qurvIxbxw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/js/bootstrap.bundle.min.js" integrity="sha512-Tc0i+vRogmX4NN7tuLbQfBxa8JkfUSAxSFVzmU31nVdHyiHElPPy2cWfFacmCJKw0VqovrzKhdd2TSTMdAxp2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        <script src="assets/js/geodatasource-cr.min.js"></script>
        <link rel="stylesheet" href="assets/css/geodatasource-countryflag.css">
        <link href="https://fonts.googleapis.com/css?family=Strait|Chonburi" rel="stylesheet">

        <!-- link to pt language po file -->
        <link rel="gettext" type="application/x-po" href="languages/pt/LC_MESSAGES/pt.po" />
        <script type="text/javascript" src="assets/js/Gettext.js"></script>
        <style type="text/css">
            .ui-selectmenu-button.ui-button {
                width: 100%;
            }
            h2 {
                font-family: "Strait";
                font-size: 280%;
                font-weight: bold;
            }
            .region-style {
                border: 1px solid #c5c5c5 !important;
                background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20fill%3D%22%23777777%22%20d%3D%22M480%20224C492.9%20224%20504.6%20231.8%20509.6%20243.8C514.6%20255.8%20511.8%20269.5%20502.7%20278.7L342.7%20438.7C330.2%20451.2%20309.9%20451.2%20297.4%20438.7L137.4%20278.7C128.2%20269.5%20125.5%20255.8%20130.5%20243.8C135.5%20231.8%20147.1%20224%20160%20224L480%20224z%22/%3E%3C/svg%3E);
                background-color:#f6f6f6;
                padding: .3rem 1rem;
                cursor:pointer;
                font-size: .9rem
            }
            #display {
                display: block;
                text-align: center;
                font-size: 1.2rem;
                font-family: 'Chonburi', cursive;
                font-weight: normal;
                margin-bottom:1rem;
            }
            label {
                font-family: 'Chonburi';
            }
        </style>

        <script type="text/javascript">
            $(document).ready(function() {
                $("#gds-cr-one").on('change',function() {
                    $("#display").html("Você selecionou " + $("#countrySelection").children("option").filter(":selected").text() + " > " + $(this).children("option").filter(":selected").text());
                });
            });
        </script>
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center" style="margin-bottom:30px;">
                    <h2>COUNTRY-REGION DROPDOWN MENU</h2>
                </div>
                <div class="col-md-12">
                    <form class="form-horizontal">
                        <p class="text-center fs-6">Example: Country-Region DropDown Menu in Portuguese [PT]</p>
                        <div class="row form-group justify-content-center mb-3">
                            <label class="col-sm-1 control-label my-auto text-sm-end">País</label>
                            <div class="col-sm-10">
                                <select id="countrySelection" class="form-select gds-cr gds-countryflag" country-data-region-id="gds-cr-one" data-language="pt"></select>
                            </div>
                        </div>
                        <div class="row form-group justify-content-center">
                            <label for="gds-cr-one" class="col-sm-1 control-label my-auto text-sm-end">Região</label>
                            <div class="col-sm-10">
                                <select class="form-select region-style" id="gds-cr-one"></select>
                            </div>
                        </div>
                    </form>
                    <br>
                    <label id="display"></label>
                </div>
            </div>
        </div>
    </body>
</html>