Trabalhar com elementos select é uma tarefa comum no desenvolvimento web. Este guia oferece uma visão completa das operações frequentes utilizando JavaScript puro e jQuery, com exemplos de código adaptados.

Operações com JavaScript puro

Abaixo estão funções utilitárias para gerenciar opções em um select.

Verificar se uma opção com valor específico já existe:

function checkOptionExists(selectElement, targetValue) {
  let found = false;
  const options = selectElement.options;
  for (let idx = 0; idx < options.length; idx++) {
    if (options[idx].value === targetValue) {
      found = true;
      break;
    }
  }
  return found;
}

Adicionar uma nova opção ao select:

function addOptionToSelect(selectElement, optionText, optionValue) {
  if (checkOptionExists(selectElement, optionValue)) {
    console.log("Valor já existente na lista.");
    return;
  }
  const newOption = new Option(optionText, optionValue);
  selectElement.options.add(newOption);
  console.log("Opção adicionada com sucesso.");
}

Remover uma opção por valor:

function removeOptionByValue(selectElement, optionValue) {
  if (!checkOptionExists(selectElement, optionValue)) {
    console.log("Opção não encontrada.");
    return;
  }
  const opts = selectElement.options;
  for (let i = 0; i < opts.length; i++) {
    if (opts[i].value === optionValue) {
      selectElement.remove(i);
      break;
    }
  }
  console.log("Opção removida.");
}

Excluir todas as opções selecionadas pelo usuário:

function removeSelectedOptions(selectElement) {
  for (let i = selectElement.options.length - 1; i >= 0; i--) {
    if (selectElement.options[i].selected) {
      selectElement.remove(i);
    }
  }
}

Atualizar o texto de uma opção baseado em seu valor:

function updateOptionText(selectElement, newValue, newText) {
  if (!checkOptionExists(selectElement, newValue)) {
    console.log("Opção inexistente para atualização.");
    return;
  }
  const allOptions = selectElement.options;
  for (let j = 0; j < allOptions.length; j++) {
    if (allOptions[j].value === newValue) {
      allOptions[j].text = newText;
      break;
    }
  }
  console.log("Texto da opção atualizado.");
}

Selecionar a primeira opção com um texto específico:

function selectFirstByText(selectElement, searchText) {
  let selected = false;
  for (let k = 0; k < selectElement.options.length; k++) {
    if (selectElement.options[k].text === searchText) {
      selectElement.options[k].selected = true;
      selected = true;
      break;
    }
  }
  if (selected) {
    console.log("Opção selecionada por texto.");
  } else {
    console.log("Nenhuma opção com o texto informado.");
  }
}

Definir seleção por valor diretamente:

function selectByValue(selectElement, valueToSet) {
  selectElement.value = valueToSet;
}

Obter informações da seleção atual:

// Valor da opção selecionada
const currentValue = selectElement.value;

// Texto da opção selecionada
const currentText = selectElement.options[selectElement.selectedIndex].text;

// Índice da opção selecionada
const currentIndex = selectElement.selectedIndex;

Limpar todas as opções do select:

function clearSelectOptions(selectElement) {
  selectElement.options.length = 0;
}

Operações com jQuery

jQuery simplifica a manipulação do DOM. Considere um select com classe .my-select.

Definir uma opção como selecionada pelo seu valor:

$(".my-select").val("exemplo");

Selecionar uma opção pelo seu texto visível:

$(".my-select").find("option").filter(function() {
  return $(this).text() === "exemplo";
}).prop("selected", true);

Recuperar o valor da opção atualmente escolhida:

const selectedValue = $(".my-select").val();

Obter o texto da opção selecioanda:

const selectedText = $(".my-select").find(":selected").text();

Criar uma lista dependente (cascata) entre dois selects:

$("#primary-select").on("change", function() {
  const dependentSelect = $("#secondary-select");
  dependentSelect.empty();

  // Gerar opções dinamicamente com base na seleção primária
  const newOption = $("<option>")
    .attr("value", "novo-valor")
    .text("Nova opção gerada");
  
  dependentSelect.append(newOption);
});</option>