Propriedade selecionada de Index em JavaScript

Enquanto desenvolve um site, pode haver uma situação em que você precisa obter o índice da opção selecionada no menu suspenso adicionado. Você não tem ideia de como fazer isso? Sem problemas! Para lidar com essa situação, o JavaScript oferece um atributo chamado “SelectedIndex”Que é usado para obter o índice da opção selecionada da lista suspensa.

Este tutorial explicará a propriedade SelectedIndex e seu uso em JavaScript.

O que é a propriedade SelectedIndex em JavaScript?

O "SelectedIndex”É a propriedade JavaScript utilizada para definir ou retornar o índice da opção selecionada na lista suspensa adicionada. Ele gera um número que representa o índice da opção selecionada no menu suspenso HTML. Mais especificamente, o índice da lista suspensa começa em zero e retorna -1 se nenhuma opção for escolhida.

Sintaxe

Siga a sintaxe abaixo para usar a propriedade SelectedIndex:

selectObject.SelectedIndex

Aqui, "selectObject”É a opção que é selecionada no menu suspenso, e a propriedade SelectedIndex buscará seu índice.

Exemplo 1: Obtenha o índice de opção selecionada usando a propriedade SelectedIndex com o método addEventListener ()

Primeiro, criaremos uma lista suspensa usando o “”Tag e especifique sua opção usando o“" Tag. Em seguida, adicione um rótulo que exibirá o índice da opção selecionada:

Selecione a opção e obtenha o índice da opção selecionada

C
C++
Html
CSS
Pitão
Java
JavaScript

Em um arquivo JavaScript, primeiro obteremos a lista suspensa e o elemento do rótulo passando seus respectivos IDs “Selecione" e "índice”No documento.getElementById () método. Então, invocar o “addEventListener ()”Método e passe o“mudar”Evento e a função como argumentos. Isso funcionará de tal maneira que, quando uma opção do menu suspenso for selecionada, seu índice será exibido como o conteúdo do rótulo adicionado:

const selectOption = documento.getElementById ('select');
const optionIndex = documento.getElementById ('índice');
selectOption.addEventListener ('alteração', () =>
const index = SelectOption.selectedIndex;
OptionIndex.textContent = 'O índice da opção selecionada é: $ index';
);

Pode -se observar que o índice em relação à opção selecionado é exibido com sucesso:

Exemplo 2: Obtenha o índice de opção selecionada usando a propriedade SelectedIndex com o OnClick Event

Aqui, criaremos dois botões, um para desmarcar as opções e o outro para exibir índice que desencadeará o “desmarcar ()", e a "getIndexOfSelectedOption ()”Funções, respectivamente:

Mostrar índice
Desmarcar

No arquivo JavaScript, em primeiro lugar, defina o “getIndexOfSelectedOption ()”Função que imprimirá o índice contra a opção selecionada, buscando o elemento de lista suspensa usando seu documento.getElementById () método e depois acessar o índice da opção selecionada usando o “SelectedIndex" propriedade:

função getIndexOfSelectedOption ()
var selectOption = documento.getElementById ('select').selectedIndex;
var optionIndex = documento.getElementById ("índice");
OptionIndex.textContent = 'O índice da opção selecionada é: $ selectOption';

Na função desselect (), definiremos o valor “-1”Do menu suspenso. Como resultado, a opção é desmarcada:

função desselect ()
documento.getElementById ("selecione").selectedIndex = "-1";

Clicando no “Mostrar índice”O botão exibirá o índice da opção selecionada. Por outro lado, o “Desmarcar”O botão desmarcará a opção selecionada:

Cobrimos todos os detalhes relacionados à propriedade JavaScript SelectedIndex.

Conclusão

O "SelectedIndex”A propriedade é usada para determinar o índice da opção selecionada em uma lista suspensa HTML criada usando a tag com tag. Ele fornece um número como uma saída que representa o índice da opção selecionada no menu suspenso. Mais especificamente, o índice da lista suspensa começa em zero e retorna -1 se nenhuma opção for escolhida. Neste tutorial, discutimos a propriedade JavaScript SelectedIndex.