Search code examples
javascriptbookmarklet

Javascript bookmarklet: how to return value of a drop down based off of title


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>


Solution

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