How do I access an

I have the following code:
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];
 });

I want to be able to always access the “Instagram” option to do things with it. It’s currently the last in the list, so I’m using the length of the dropdown to access it, but I don’t want to have to update the code every time I add something to the list, before or after Instagram. Is there a way to access the <option> code using something like source.options['Instagram'] using Javascript (not jQuery)? I can’t assign ids to the options, because the options are generated using other software that doesn’t give me the option to do that. I’m also trying to avoid looping through the options comparing the values with what I’m looking for.

EDIT: The user is choosing how they heard about my site. If they come to the site link from IG, then the URL has ?ref=IG appended to it. I want all the other options to disappear since that’s the link they followed.

Answer

You can use a regular query selector.

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>