如何通过 <select> 下拉列表中的“value”属性选择 <option> 项？答案

【问题标题】：How to select <option> item by the "value" attribute in <select> drop-down list?如何通过 <select> 下拉列表中的“value”属性选择 <option> 项？
【发布时间】：2012-10-13 15:28:57
【问题描述】：

在我的 Delphi 应用程序中，我使用了一个 TWebBrowser 控件，我在其中加载了一个 HTML 文档，其中包含一个 <select> 元素（下拉列表）和一些 <option> 项（下拉列表项）。假设，我的网络浏览器中加载了以下 HTML 文档：

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

如何以编程方式选择例如<option>，其value 属性为thirdvalue ？或者换句话说，当我只知道这个项目的value 属性是thirdvalue 时，我如何以编程方式选择这个下拉列表中的第三个项目？

【问题讨论】：

标签： delphi dom twebbrowser

【解决方案1】：

例如，您可以使用带有 selectedIndex 属性的 IHTMLSelectElement 接口。作为展示，我制作了以下功能。

SelectOptionByValue 函数

以下函数尝试在指定的<select> 元素（下拉列表）中查找并选择（如果找到）给定value 属性值的<option>（下拉列表项）。如果没有找到<option>，则清除当前下拉列表选择（未选择任何项目）。

参数：

ADocument - 输入 HTML 文档的接口
AElementID - <select> 元素的 ID（下拉列表的元素 ID）
AOptionValue - 搜索到的 <option> 元素值（下拉列表项的值）

返回值：

如果带有给定value 的<option> 被成功找到（并被选中），则返回值是指定下拉列表中该选项的索引，否则为-1。

源代码：

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;

用法示例：

要从问题的 HTML 文档的下拉列表中选择具有 thirdvalue 值的项目，可以使用此代码（假设此处的 WebBrowser1 组件中加载了该文档）：

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;

问题中的示例 HTML 文档：

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

【讨论】：

[+1] 由于您包含了if Supports，HTMLElement 可能不是IHTMLSelectElement，所以我会使用：if Supports(HTMLDocument.getElementById('ComboBox'), IID_IHTMLSelectElement, HTMLElement) then...。只是我的 2 美分；）
@kobik，有趣的是，我还没有收到有关此评论的通知（即使我是帖子所有者）。当然，这样会好很多！