如何以编程方式从 DropdownButton 中选择项目

问题描述 投票：0回答：1

更新：按照@CBroe的建议，我能够用
document.getElementById('tux-2_list_1').click()
解决它！ ：D

更新 2：但事实证明，只有当我首先单击“检查元素”中的项目时，这才有效。如果我重新加载表格，它会显示 
TypeError: Cannot read properties of null (reading 'click')
。我尝试在 
document.getElementById('').focus()
、
tux-2_list_1
和 
tux-2_button
上使用 
'tux-2_list
，但只得到 
TypeError: Cannot read properties of null (reading 'focus')
。

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"
更改按钮文本但不触发事件。

DropdownButton 确实有一个 ID（'tux-2_button'）：

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

我也尝试与“tux-2_list”进行交互。我的问题是需要找到正确的 ID 才能与之交互吗？您对我如何解决这个问题有什么建议吗？如果您觉得有帮助，您可以找到实时 HTML 页面链接到这里。

javascript html
1个回答
0
投票

问题很简单。这里有两个问题。 首先，“TypeError：document.getElementById.options 不可迭代”

此错误消息表明 options 属性不可迭代。要解决此问题，您应该直接在元素上访问 options 属性，而不是在“getElementById”结果上访问。我可能会这样做：

[document.getElementById('tux-button').getElementsByTagName('option')].findIndex(option => option.text === "I’d like to report a possible copyright infringement in user-generated content")

其次，无论选择哪个选项，document.getElementById(‘tux-2_button’).value 都会返回“”：

下拉元素的 value 属性代表所选选项的值，而不是文本内容。如果您想设置选定的选项，请使用 selectedIndex 属性。

举个例子，

// Selects the first option
document.getElementById('tux-2_button').selectedIndex = 1;

最后，我可能会这样实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown Selection Example</title>
</head>
<body>
    <select id="tux-2_button">
        <option value="1">I’d like to report a possible copyright infringement in user-generated content</option>
        <option value="2">Reporting a possible copyright infringement in advertisements or TikTok Shop</option>
        <!-- Add other options here -->
    </select>

    <!-- Other form elements go here -->

    <script>
        // Get the dropdown element
        const dropdown = document.getElementById('tux-2_button');

        // Set the desired option (e.g., select the second option)
        dropdown.selectedIndex = 1;

        // Simulate a click event (if needed)
        // dropdown.click();

        // Add event listener to handle selection changes
        dropdown.addEventListener('change', (event) => {
        const selectedOption =   event.target.options[event.target.selectedIndex];
        console.log(`Selected option: ${selectedOption.text} (Value: ${selectedOption.value})`);
        // Handle your logic here
        });
    </script>
</body>

这听起来是个好主意吗？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.