Dados Pessoais jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detalhes Pessoais</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-4">
    <!-- Duas colunas -->
    <div class="row">
        <!-- Primeira coluna - Dropdown -->
        <div class="col-md-6">
            <h3>Selecione um Nome:</h3>
            <select class="form-control" id="nomesDropdown">
                <option value="0">João Silva</option>
                <option value="1">Maria Oliveira</option>
                <option value="2">Pedro Santos</option>
                <option value="3">Gabriela Rada</option>

            </select>
        </div>

        <div class="col-md-6">
            <h3>Detalhes do Nome Selecionado:</h3>
            <!-- Substitua os dados abaixo conforme resposta da API -->
            <img src="https://i.imgur.com/rOUHt7d.jpg" alt="Foto" class="img-fluid" style="max-width: 100%;">
            <h4>Nome: <span id="detalheNome"></span></h4>
            <p>Descrição: <span id="detalheDescricao"></span></p>
            <p>Idade: <span id="detalheIdade"></span></p>
        </div>
    </div>

    <!-- Linha com Rodapé -->
    <div class="row mt-4">
        <div class="col-md-12">
            <footer class="text-center">
                <p>&copy; Detalhes Pessoais</p>
            </footer>
        </div>
    </div>
</div>

<!-- Adicione os scripts JavaScript do Bootstrap e seu próprio script se necessário -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<script>
    // Adicione o código JavaScript abaixo:

</script>

</body>
</html>