How to select <option> item by the “value” attribu

In my Delphi application I'm using a TWebBrowser control, where I have loaded an HTML document, containing a <select> element (drop down list) with a few <option> items (drop down list items). Let's say, I have the following HTML document loaded in my web browser:

<html>
<body>
  <select id="ComboBox">
    <option value="firstvalue">First Value</option>
    <option value="secondvalue">Second Value</option>
    <option value="thirdvalue">Third Value</option>
  </select>  
</body>
</html>

How can I programatically select e.g. the <option>, whose value attribute is thirdvalue ? Or in other words, how can I programatically select the third item in this drop down list, when I know only that this item's value attribute is thirdvalue ?

You can use the IHTMLSelectElement interface with its selectedIndex property for instance. As a showcase I've made the following function.

SelectOptionByValue function

The following function tries to find, and select (if found) an <option> (a drop down list item) of a given value attribute value in a specified <select> element (drop down list). If no <option> is found, the current drop down list selection is cleared (no item is selected).

Parameters:

ADocument - the interface to an input HTML document
AElementID - ID of a <select> element (element ID of a drop down list)
AOptionValue - searched <option> element value (value of a drop down list item)

Return value:

If the <option> with a given value is successfully found (and selected), the return value is the index of that option in a specified drop down list, -1 otherwise.

Source code:

function SelectOptionByValue(const ADocument: IDispatch; const AElementID,
  AOptionValue: WideString): Integer;
var
  HTMLDocument: IHTMLDocument3;
  HTMLElement: IHTMLSelectElement;

  function IndexOfValue(const AHTMLElement: IHTMLSelectElement;
    const AValue: WideString): Integer;
  var
    I: Integer;
  begin
    Result := -1;
    for I := 0 to AHTMLElement.length - 1 do
      if (AHTMLElement.item(I, I) as IHTMLOptionElement).value = AValue then
      begin
        Result := I;
        Break;
      end;
  end;

begin
  Result := -1;
  if Supports(ADocument, IID_IHTMLDocument3, HTMLDocument) then
  begin
    if Supports(HTMLDocument.getElementById(AElementID), IID_IHTMLSelectElement,
      HTMLElement) then
    begin
      Result := IndexOfValue(HTMLElement, AOptionValue);
      HTMLElement.selectedIndex := Result;
    end;
  end;
end;

Example usage:

To select the item with thirdvalue value in drop down list from the HTML document from the question it's possible to use this code (assuming in the WebBrowser1 component here is loaded that document):

procedure TForm1.Button1Click(Sender: TObject);
var
  Index: Integer;
begin
  Index := SelectOptionByValue(WebBrowser1.Document, 'ComboBox', 'thirdvalue');

  if Index <> -1 then
    ShowMessage('Option was found and selected on index: ' + IntToStr(Index))
  else
    ShowMessage('Option was not found or the function failed (probably due to ' +
      'invalid input document)!');
end;

Example HTML document from the question:

<html>
<body>
  <select id="ComboBox">
    <option value="firstvalue">First Value</option>
    <option value="secondvalue">Second Value</option>
    <option value="thirdvalue">Third Value</option>
  </select>  
</body>
</html>