如何选择DOM中无options标签的下拉菜单选项？

Hey there! This looks like a classic Select2 dropdown scenario—those components replace the native <select> with their own custom UI elements, which is why you can't find the full list of options under the original <select> tag in the DOM until you trigger the dropdown. The native select is just hidden (hence the select2-hidden-accessible class) and only keeps the selected option synced for form submission.

Here's a step-by-step solution to locate and interact with the options:

1. Trigger the dropdown first #

Select2 creates a custom trigger element right next to the hidden native select. You can locate this trigger using a sibling selector:

• CSS Selector: #viewMenu + .select2-container .select2-selection
• XPath: //select[@id='viewMenu']/following-sibling::div[contains(@class, 'select2-container')]//span[@class='select2-selection']

Click this element to open the dropdown and make the options visible in the DOM.

2. Locate the target option #

Once the dropdown is open, Select2 injects a global dropdown container (usually attached to the <body>) with the class select2-dropdown. The options inside are wrapped in <li> elements with the class select2-results__option.

To target an option by its visible text, use:

• CSS Selector (if your testing tool supports :contains()): li.select2-results__option:contains('Your Option Text')
• XPath: //li[contains(@class, 'select2-results__option') and normalize-space(text())='Your Option Text']

Example Code (Selenium Python) #

If you're using Selenium, here's how you'd implement this with explicit waits to handle dynamic elements:

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# Wait for and click the Select2 trigger
dropdown_trigger = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, "#viewMenu + .select2-container .select2-selection"))
)
dropdown_trigger.click()

# Wait for the target option to be clickable and select it
target_option = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.XPATH, "//li[contains(@class, 'select2-results__option') and normalize-space(text())='Documents']"))
)
target_option.click()

Extra Tips #

• If your dropdown uses AJAX to load options dynamically (e.g., searching for an option), you'll need to first locate the Select2 search input (class select2-search__field), enter your query, then wait for the filtered options to appear.
• Double-check the class names if your Select2 version is older—some legacy versions use slightly different classes like select2-result-label instead of select2-results__option.

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