Tengo el siguiente código:
HTML
<select name="cf[source]" id="form1_source" required="" class="cf-input cf-input-shadow-1 cf-one-half "> <option value="notspecified" data-calc-value="notspecified">Please select</option> <option value="Facebook" data-calc-value="Facebook">Facebook</option> <option value="Flyer" data-calc-value="Flyer">Flyer</option> <option value="Instagram" data-calc-value="Instagram">Instagram</option> </select>JavaScript
document.addEventListener('DOMContentLoaded', function(){ var source = document.getElementById('form1_source'); var ref = window.location.search; var IG = source[source.options.length-1]; }); Quiero poder acceder siempre a la opción "Instagram" para hacer cosas con él. Actualmente es el último de la lista, así que estoy usando la longitud del menú desplegable para acceder a él, pero no quiero tener que actualizar el código cada vez que agrego algo a la lista, antes o después de Instagram. ¿Hay alguna manera de acceder al código <option> usando algo como source.options['Instagram'] usando Javascript (no jQuery)? No puedo asignar identificadores a las opciones, porque las opciones se generan usando otro software que no me da la opción de hacer eso. También estoy tratando de evitar recorrer las opciones comparando los valores con lo que estoy buscando.
EDITAR: el usuario elige cómo se enteró de mi sitio. Si llegan al enlace del sitio desde IG, entonces la URL tiene ?ref=IG adjunto. Quiero que todas las otras opciones desaparezcan ya que ese es el enlace que siguieron.
Puede utilizar un selector de consultas normal.
let select = document.getElementById('form1_source'); let options = select.querySelectorAll('option[value="Instagram"]'); console.log(options[0]); <select name="cf[source]" id="form1_source" required="" class="cf-input cf-input-shadow-1 cf-one-half "> <option value="notspecified" data-calc-value="notspecified">Please select</option> <option value="Facebook" data-calc-value="Facebook">Facebook</option> <option value="Flyer" data-calc-value="Flyer">Flyer</option> <option value="Instagram" data-calc-value="Instagram">Instagram</option> </select>Quiero pedir una aclaración (agregaría un comentario pero actualmente no hay suficiente representante).
Un usuario elige una opción, entonces, ¿por qué quieres obtener un valor que ya está ahí?
En lugar de apuntar a una opción, para hacer lo que sea, esperaría que el enfoque correcto sea asumir que no sabe lo que elige el usuario.
<select name="cf[source]" id="form1_source" required="" class="cf-input cf-input-shadow-1 cf-one-half "> <option value="notspecified" data-calc-value="notspecified">Please select</option> <option value="Facebook" data-calc-value="Facebook">Facebook</option> <option value="Flyer" data-calc-value="Flyer">Flyer</option> <option value="Instagram" data-calc-value="Instagram">Instagram</option> </select> <p id="feedback"> </p> <script> var source = document.getElementById('form1_source'); source.addEventListener("change",function(event_object){ var feedback = document.getElementById("feedback"); feedback.innerHTML = event_object.target.value; }) </script>Consulte este violín: https://jsfiddle.net/hyurxtnz/3/ y actualice su pregunta con información adicional.