How do I access an <option> using its value?-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

I want to ask for a clarification (I would add a comment but currently not enough rep).

A user chooses an option, therefore, why do you want to get a value that is there already?

Instead of targeting one option, to do whatever, I would expect the correct approach would be to assume you do not know what the user chooses.

<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>

Please check this fiddle: https://jsfiddle.net/hyurxtnz/3/ and update your question with additional information.