WebBrowser下拉框选择问题：无法选中指定值的技术求助

Got it, let's break down why your original code didn't work and how to fix it: the dropdown you're dealing with isn't a native HTML <select> element—it's a custom JavaScript-powered UI component (looks like a Telerik RadDropDownList or similar library component, given the rw-dropdown-list class). These components don't rely on the native selected attribute; instead, they use ARIA attributes like aria-selected to track state, and they manage their own internal state via JavaScript. Just modifying the DOM attribute won't trigger the component's internal logic to update the selected value or fire change events.

Here's how to properly select an item in this dropdown:

Step-by-Step Solution #

1. Understand the Component's Structure #

The component has three key parts:

• The input container (rw-dropdown-list-input) that shows the selected text
• The listbox (rw_71_listbox) with <li role="option"> items
• ARIA attributes (aria-selected) to track which item is active

2. Use JavaScript to Update State and Trigger Events #

Since this is a JS-driven component, we need to execute JavaScript code through the WebBrowser control to:

• Update the aria-selected attribute for all list items
• Update the visible input text
• Trigger the component's change event to sync internal state

3. C# Code Implementation #

Replace your original code with this, which uses InvokeScript to run the necessary JavaScript:

// Define the JavaScript code to select the target item
string selectDropdownItemScript = @"
    // Get references to key elements
    var comboContainer = document.getElementById('rw_71_input');
    var listbox = document.getElementById('rw_71_listbox');
    var targetText = 'Mannas'; // Replace with the item text you want to select
    var targetItem = null;

    // Update aria-selected state for all options
    var listItems = listbox.querySelectorAll('li[role=""option""]');
    for (var i = 0; i < listItems.length; i++) {
        var item = listItems[i];
        if (item.innerText.trim() === targetText) {
            targetItem = item;
            item.setAttribute('aria-selected', 'true');
        } else {
            item.setAttribute('aria-selected', 'false');
        }
    }

    // Update the visible input text
    if (targetItem) {
        comboContainer.querySelector('.rw-dropdown-list-input').innerText = targetText;
        
        // Trigger a change event to notify the component of the selection
        var changeEvent = document.createEvent('Event');
        changeEvent.initEvent('change', true, true);
        comboContainer.dispatchEvent(changeEvent);
    }
";

// Execute the script in the WebBrowser control
webBrowser1.Document.InvokeScript("eval", new object[] { selectDropdownItemScript });

4. Bonus: Use Component-Specific API (If Known) #

If you know the exact library powering this dropdown (e.g., Telerik Kendo UI), using its official JS API is more reliable. For example, if this is a Kendo DropDownList:

// Kendo UI specific code (requires jQuery)
var dropdown = $('#rw_71_input').data('kendoDropDownList');
dropdown.select(function(dataItem) {
    return dataItem.text === 'Mannas';
});
dropdown.trigger('change');

You can run this via the same InvokeScript method in C#.

Why Your Original Code Failed #

• The component doesn't use the native selected attribute—it uses aria-selected instead.
• Even if you set aria-selected correctly, the component's internal JS state won't update unless you trigger the appropriate event or call its API.
• The visible input text won't change automatically just by updating the list item's state.

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