Menu
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 ?
624
Method 1: Using the value property: The value of the selected element can be found by using the value property on the selected element that defines the list. This property returns a string representing the value attribute of the <option> element in the list. If no option is selected then nothing will be returned.
You can select on any attribute and its value by using the attribute selector [attributename=optionalvalue] , so in your case you can select the option and set the selected attribute.
The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).
Selecting multiple options vary in different operating systems and browsers: For windows: Hold down the control (ctrl) button to select multiple options. For Mac: Hold down the command button to select multiple options.
You can use the IHTMLSelectElement interface with its selectedIndex property for instance. As a showcase I've made the following 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:
<select> element (element ID of a drop down list)<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
