Select Loading without AJAX data

Question

I have ajax, which is coming with the blank data, as you can see in the images below, this arriving the data, except that at the time of loading in select, the value, and text, are empty

<script>
    $("#UF").on("change", function() {
       
        var url = '@Url.Action("BuscaCidades", "CidadeG", new {area = "Gerencial"})';
        var estado = $("#UF option:selected").val();
        debugger;
        $.ajax({
            type: 'GET',
            data: { estado: estado },
            url: url,
            dataType: 'json',
            success: function (cidade) {
                debugger;
                if (cidade != null) {
                    var selectbox = $('#cbmunicipio');
                    $("#cbmunicipio").empty();
                    $('<option>').val("0").text("Selecione o Município").appendTo(selectbox);
                    $.each(cidade.cidade,
                        function(i, d) {
                            $('<option>').val(d.id).text(d.value).appendTo(selectbox);
                        });


                }
            },
            error: function(ex) {
                //alert('Failed to retrieve states.' + ex);
            }
        });
    })
</script>

   <select id="cbmunicipio" class="form-control">
                                               
    </select>