Como posso fazer um dropdown sincronizar com alguns radiobuttons, queria aprender usar isto para poder deixar pré-definido para algumas opções.

Oi Gabriel, tudo bem?

Para sincronizar um dropdown com alguns radiobuttons e deixar pré-definidas algumas opções, você pode utilizar JavaScript para lidar com a interação entre os elementos. Vou te explicar passo a passo como fazer isso.

Primeiramente, você precisa criar os elementos HTML necessários: o dropdown, os radiobuttons e um espaço para exibir o resultado. Vamos usar o seguinte código como exemplo:

<select id="dropdown">
  <option value="">Selecione uma pessoa</option>
  <option value="pessoa1">Pessoa 1</option>
  <option value="pessoa2">Pessoa 2</option>
  <option value="pessoa3">Pessoa 3</option>
  <option value="pessoa4">Pessoa 4</option>
  <option value="pessoa5">Pessoa 5</option>
</select>

<label><input type="radio" name="opcoes" value="1"> Opção 1</label>
<label><input type="radio" name="opcoes" value="2"> Opção 2</label>
<label><input type="radio" name="opcoes" value="3"> Opção 3</label>
<label><input type="radio" name="opcoes" value="4"> Opção 4</label>

<div id="resultado"></div>

Agora vamos escrever o código JavaScript para fazer a sincronização dos elementos. Podemos utilizar o evento change para capturar a seleção do dropdown e dos radiobuttons:

// Obtém os elementos HTML
const dropdown = document.getElementById("dropdown");
const opcoesRadiobuttons = document.getElementsByName("opcoes");
const resultado = document.getElementById("resultado");

// Adiciona um evento de mudança ao dropdown
dropdown.addEventListener("change", function() {
  // Obtém a opção selecionada no dropdown
  const pessoaSelecionada = dropdown.value;

  // Verifica se uma pessoa foi selecionada
  if (pessoaSelecionada !== "") {
    // Obtém as opções que a pessoa gosta
    let opcoesGostadas = [];

    // Verifica cada radiobutton
    opcoesRadiobuttons.forEach(function(radiobutton) {
      // Verifica se o radiobutton está marcado
      if (radiobutton.checked) {
        // Adiciona a opção à lista de opções gostadas
        opcoesGostadas.push(radiobutton.value);
      }
    });

    // Exibe o resultado
    resultado.textContent = pessoaSelecionada + " gosta da(s) opção(ões): " + opcoesGostadas.join(", ");
  } else {
    // Limpa o resultado se nenhuma pessoa foi selecionada
    resultado.textContent = "";
  }
});

// Adiciona um evento de mudança aos radiobuttons
opcoesRadiobuttons.forEach(function(radiobutton) {
  radiobutton.addEventListener("change", function() {
    // Simula a mudança no dropdown para atualizar o resultado
    dropdown.dispatchEvent(new Event("change"));
  });
});

Pronto! Agora, quando o usuário selecionar uma pessoa no dropdown e marcar as opções de interesse nos radiobuttons, o resultado será exibido abaixo. Se nenhuma pessoa for selecionada, o resultado será limpo.

Você pode testar aqui.

Ah! Não sei você está sabendo, mas no nosso discord estão tendo vários grupos de estudos, você pode entrar e tirar suas dúvidas. Saiba mais aqui.

Um abraço e bons estudos.