Propiedad SelectedIndex en JavaScript

Al desarrollar un sitio web, puede haber una situación en la que necesita obtener el índice de la opción seleccionada desde el menú desplegable adicional. ¿No tienes idea de cómo hacer eso?? No hay problema! Para manejar tal situación, JavaScript ofrece un atributo llamado "SelectedIndex"Eso se usa para obtener el índice de la opción seleccionada de la lista desplegable.

Este tutorial explicará la propiedad seleccionada ININDEX y su uso en JavaScript.

¿Qué se selecciona la propiedad Index en JavaScript??

El "SelectedIndex"¿Es la propiedad JavaScript utilizada para configurar o devolver el índice de la opción seleccionada en la lista desplegable adicional. Emite un número que representa el índice de la opción seleccionada en el menú desplegable HTML. Más específicamente, el índice de la lista desplegable comienza en cero, y devuelve -1 si no se elige ninguna opción.

Sintaxis

Siga la sintaxis dada a continuación para usar la propiedad SelectedIndex:

selectObject.SelectedIndex

Aquí, "selectObject"Es la opción que se selecciona en el menú desplegable, y la propiedad selectedIndex obtendrá su índice.

Ejemplo 1: Obtenga el índice de opción seleccionada utilizando la propiedad SelectedIndex con el método AddEventListener ()

Primero, crearemos una lista desplegable usando el ""Etiqueta y especifique su opción usando el""Etiquetas. Luego, agregue una etiqueta que mostrará el índice de la opción seleccionada:

Seleccione la opción y obtenga el índice de la opción seleccionada

C
C++
Html
CSS
Pitón
Java
Javascript

En un archivo de JavaScript, primero obtendremos la lista desplegable y el elemento de la etiqueta al pasar sus respectivas ID "seleccionar" y "índice"En el documento.método getElementById (). Entonces, invoca el "addEventListener ()"Método y pasar el"cambiar"Evento y la función como argumentos. Esto funcionará de tal manera que cuando se seleccione una opción del menú desplegable, su índice se mostrará como el contenido de la etiqueta adicional:

const selectOption = documento.getElementById ('select');
const opcionIndex = documento.getElementById ('índice');
Seleccionar opción.addEventListener ('Change', () =>
const index = selectOption.SelectedIndex;
OpcionIndex.textContent = 'El índice de la opción seleccionada es: $ index';
);

Se puede ver que el índice contra la opción seleccionada se muestra correctamente:

Ejemplo 2: Obtenga el índice de opción seleccionada utilizando la propiedad SelectedIndex con el evento OnClick

Aquí, crearemos dos botones, uno para la selección de las opciones y el otro para mostrar el índice que activará el "deselección ()", y el "getIndexOfSelectedOption ()"Funciones, respectivamente:

Índice de exhibición
Deseleccionar

En el archivo JavaScript, en primer lugar, defina el "getIndexOfSelectedOption ()Función "que imprimirá el índice contra la opción seleccionada obteniendo su elemento de lista desplegable usando su documento.método getElementById () y luego acceder al índice de la opción seleccionada usando el "SelectedIndex" propiedad:

función getIndexOfSelectedOption ()
var selectOption = documento.getElementById ('Seleccionar').SelectedIndex;
var optionIndex = documento.getElementById ("índice");
OpcionIndex.textContent = 'El índice de la opción seleccionada es: $ selectOption';

En la función deselect (), estableceremos el valor "-1"Del menú desplegable. Como resultado, la opción se deseleccione:

función deselect ()
documento.getElementById ("Seleccionar").seleccionadoindex = "-1";

Haciendo clic en el "Índice de exhibición"El botón mostrará el índice de la opción seleccionada. En contraste, el "DeseleccionarEl botón "deseleccionará la opción seleccionada:

Hemos cubierto todos los detalles relacionados con la propiedad JavaScript seleccionada Idex.

Conclusión

El "SelectedIndexLa propiedad se utiliza para determinar el índice de la opción seleccionada en una lista desplegable HTML creada usando la etiqueta con la etiqueta. Da un número como una salida que representa el índice de la opción seleccionada en el menú desplegable. Más específicamente, el índice de la lista desplegable comienza en cero, y devuelve -1 si no se elige ninguna opción. En este tutorial, hemos discutido la propiedad JavaScript SelectedIndex.