Después de algunas investigaciones y pruebas, descubrí que ambos métodos producen el mismo resultado. Así que me preguntaba cuál es la diferencia entre:
function buildUrl() { compType = document.querySelector('[name = "c-type"]'); compTypeValue = compType.value; }y
function buildUrl() { compType = document.querySelector('[name = "c-type"]'); compTypeValue = compType.options[compType.selectedIndex].value; } <form id="custom-drop"> <select name="c-type" id="compressor-type"> <option value="screw">Screw</option> <option value="scroll">Sroll</option> <option value="centrifugal">Centrifugal</option> <option value="piston">Piston</option> </select> </form>Leí preguntas ( this y this ) relacionadas con este tema, pero no pude encontrar ninguna explicación para sus diferencias.
El elemento de selección también realiza un seguimiento del valor del elemento seleccionado actualmente y del índice de los elementos seleccionados.
En su primer ejemplo, accede al valor de la opción actualmente seleccionada. En el segundo, obtiene el elemento de opción completo tomando el que está en la posición de índice que está seleccionada. Al acceder a su miembro de valor, luego devuelve su valor.
Con esto obtienes el mismo resultado. Sin embargo, llamaría hacky al segundo enfoque y no consideraría hacerlo.