使用VBA选择HTML下拉框（值为100）失败，求解决方法

我要抓取某网站，该网站有个默认选中20的下拉框，可选值是20、50、100。试了设置.Value = "100"报错；调用.click只能展开下拉框；设置.selectedIndex也没用。有没有其他方法把下拉框设为100，或者展开后选中100？

对应的HTML代码 #

<span class="k-dropdown-wrap k-state-default k-state-active k-state-border-down" unselectable="on">
<span class="k-input" unselectable="on">20</span>
<span class="k-select" aria-label="select" unselectable="on">
<span class="k-icon k-i-arrow-60-down"></span></span></span>
<select style="display: none;" aria-label="20" data-role="dropdownlist">
    <option selected="selected" value="20">20</option>
    <option value="50">50</option>
    <option value="100">100</option>
</select>

我的VBA代码 #

If Not ieWebsite.document.getElementsByClassname("k-widget k-dropdown") Is Nothing Then
    Dim perPageOptions As Long
    perPageOptions = ieWebsite.document.getElementsByClassname("k-widget k-dropdown").Length
    For i = 0 To perPageOptions - 1
        On Error Resume Next
        For x = 0 To ieWebsite.document.getElementsByClassname("k-widget k-dropdown")(i).getElementsByTagName("option").Length - 1
            If ieWebsite.document.getElementsByClassname("k-widget k-dropdown")(i).getElementsByTagName("option")(x).Value = "100" Then
                ieWebsite.document.getElementsByClassname("k-widget k-dropdown")(i).getElementsByTagName("option")(x).Click 'JUST CLICKS THE DROPDOWN, NOT THE ACTUAL "100"
                Exit For
            End If
        Next x
        If Err.Number <> 0 Then
            Err.Clear
        Else
            Exit For
        End If
    Next i
End If

解决方案 #

这个下拉框是Kendo UI的DropDownList组件，原生<select>被隐藏，常规DOM操作无法触发组件的状态更新，以下是几种可行方法：

方法1：修改原生select并触发组件事件 #

直接修改隐藏的select元素，然后调用Kendo UI的trigger事件更新前端显示：

Dim selectElem As Object
Set selectElem = ieWebsite.document.querySelector("select[data-role='dropdownlist']")

' 设置选中值
selectElem.Value = "100"
' 触发组件的change事件，同步UI状态
Call ieWebsite.parentWindow.execScript("$(arguments[0]).data('kendoDropDownList').trigger('change')", "javascript", selectElem)

方法2：模拟手动选择流程 #

先展开下拉框，再点击对应选项：

' 点击下拉框展开选项
ieWebsite.document.querySelector(".k-dropdown-wrap").Click
' 等待选项加载（根据页面响应速度调整等待时间）
Application.Wait Now + TimeValue("00:00:01")

' 找到值为100的选项并点击
Dim targetOption As Object
Set targetOption = ieWebsite.document.querySelector(".k-list-container .k-item[data-value='100']")
If Not targetOption Is Nothing Then
    targetOption.Click
End If

方法3：直接调用Kendo UI API #

通过JS直接调用组件的value方法设置值，这是最可靠的方式：

ieWebsite.parentWindow.execScript _
    "var dropdown = $('select[data-role=""dropdownlist""]').data('kendoDropDownList'); dropdown.value('100'); dropdown.trigger('change');", _
    "javascript"

内容的提问来源于stack exchange，提问作者jle