I have a dropdown that can have a variable number of options.
{Option A, Option B, Option C, ...}
The options are not always available so originally the values might be {0,1,2,...} respectively but if Option A is not in the dropdown then Option B has a value of 0 and C has a value of 1 and so on. I want to create a bookmarklet that when it is activated it will select Option C in the dropdown.
So I was originally trying something like this
javascript:(function(){document.getElementsByTagName('Select')[1].value = 0;})();
But the value 0 is not always equal to Option C.
My next plan was to use:
javascript:(function(){document.getElementsByTagName('Select')[1].title = "Option C";})();
and while it did appear to make a change in the HTML code it did not make a change to the actual website.
Now I am wondering if there is a way to return the value of an option based on a title? Still brand new to Javascript but thanks for any help that is provided.
Edit 1: I can't show the real HTML due to reasons but this is what it looks like.
<select id="DropDown::Content" name="DropDown" class="x2h" title>
<option value="0" title="Option A">Option A </option>
<option value="1" title="Option B">Option B </option>
<option value="2" title="Option C">Option C </option>
You cannot set label but you can go through the drop-down, check labels, find "Option C", get its value and set its value for your Select box.
Here is an example where we set "Option C" for the second drop-down regardless of its value.
function selectOptionC () {
const selectOptions = document.getElementsByTagName("Select")[1].options;
for(let i = 0; i < selectOptions.length; i++) {
// we can check label and set value based on that
if (selectOptions[i].label == 'Option C') {
document.getElementsByTagName("Select")[1].value = selectOptions[i].value;
}
}
}
selectOptionC();
<select id="dropdown-a" title="testing title">
<option>titleA</option>
<option>titleB</option>
<option>Option C</option>
</select>
<select id="dropdown-b" title="testing title 2">
<option value='0'>titleC</option>
<option value='1'>titleD</option>
<option value='2'>Option C</option>
<option value='3'>titleD2</option>
</select>
<select id="dropdown-c" title="testing title 3">
<option>titleE</option>
<option>titleF</option>
</select>