如何通过编程方式选中DropdownButton中的选项

问题解决过程记录 #

更新：根据@CBroe建议，使用document.getElementById('tux-2_list_1').click()暂时解决了问题！:D
更新2：但发现仅在检查元素中点击过该选项后才有效，重新加载表单时会报错TypeError: Cannot read properties of null (reading 'click')。尝试对tux-2_list_1、tux-2_button和tux-2_list调用document.getElementById('').focus()，均出现TypeError: Cannot read properties of null (reading 'focus')错误。
更新3：通过先执行document.getElementById('tux-2_button').click()再执行document.getElementById('tux-2_list_1').click()彻底解决了问题！

此前尝试的无效方法及错误 #

• 执行document.getElementById('tux-2_button').selectedIndex = [...document.getElementById('tux-2_button').options].findIndex (option => option.text === "I’d like to report a possible copyright infringement in user-generated content")，返回错误TypeError: document.getElementById.options is not iterable
• 使用document.getElementById('tux-2_button').value测试，无论选中哪个选项都返回''
• 执行document.getElementById('tux-2_button').textContent = "I’d like to report a possible copyright infringement in user-generated content"，仅修改按钮文本，无法触发选项选中的相关事件

目标组件的HTML结构 #

Dropdown按钮结构 #

<button type="button" id="tux-2_button" aria-labelledby="tux-2_label tux-2_button" aria-haspopup="listbox" aria-controls="tux-2_list" aria-expanded="false" aria-invalid="false" class="css-1hneche">
  <div class="css-157g8iw">Select</div>
  <div class="css-40sddq"></div>

  <svg fill="currentColor" class="css-fdovmm" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
    <path d="M24.71 32.03a1 1 0 0 1-1.58 0L14.4 20.6a1 1 0 0 1 .8-1.61h17.54a1 1 0 0 1 .79 1.61l-8.82 11.42Z"></path>
  </svg>
</button>

关联选项列表结构 #

<ul id="tux-2_list" role="listbox" aria-labelledby="tux-2_label" tabindex="-1" class="css-9zaeqv">
  <li id="tux-2_list_1" role="option" aria-selected="false" data-list-item-value="1" class="css-1o2kt1p"><span>I’d like to report a possible copyright infringement in user-generated content</span></li>
  <li id="tux-2_list_2" role="option" aria-selected="false" data-list-item-value="2" class="css-1o2kt1p"><span>Reporting a possible copyright infringement in advertisements or TikTok Shop</span></li>
  <li id="tux-2_list_3" role="option" aria-selected="false" data-list-item-value="3" class="css-1o2kt1p"><span>Reporting a possible trademark infringement in user-generated content</span></li>
  <li id="tux-2_list_4" role="option" aria-selected="false" data-list-item-value="4" class="css-1o2kt1p"><span>Found inappropriate content on TikTok</span></li>
  <li id="tux-2_list_5" role="option" aria-selected="false" data-list-item-value="5" class="css-1o2kt1p"><span>Someone is impersonating me, sharing my private information, or featuring me in content on TikTok without my consent</span></li>
  <li id="tux-2_list_6" role="option" aria-selected="false" data-list-item-value="6" class="css-1o2kt1p"><span>None of the above</span></li>
</ul>

问题根源与解决建议 #

这个Dropdown并非原生<select>元素，而是用<button>+<ul>模拟的自定义组件，所以原生select的selectedIndex、options等属性完全不适用，这也是你之前尝试原生方法失败的核心原因。

重新加载时找不到元素的问题，是因为这个自定义下拉的选项列表<ul>默认处于隐藏/未渲染状态，只有点击按钮后才会被添加到DOM中，直接调用选项的click()会因元素不存在报错。先点击按钮触发列表渲染，再点击选项就能正常生效。

额外优化建议：

1. 可以通过等待元素加载完成再执行代码，比如用setTimeout或者MutationObserver监听列表元素的出现
2. 避免直接依赖固定ID（动态生成的ID可能变化），建议通过data-list-item-value属性或选项文本定位元素，示例代码：

// 通过文本定位目标选项
const targetOption = Array.from(document.querySelectorAll('#tux-2_list li')).find(li => 
  li.textContent.includes("I’d like to report a possible copyright infringement in user-generated content")
);
// 先触发下拉列表渲染
document.getElementById('tux-2_button').click();
// 延迟执行选项点击，确保列表已渲染
setTimeout(() => targetOption?.click(), 100);

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