问题

我想模拟用户单击某个选项，所以我使用click()来点击<option>，但它不起作用。

let select = document.getElementById("select");
select.addEventListener("change", changeSelection);

function changeSelection() {
  console.log("Clicked");
}

let option = select.querySelector('option[value="3"]');
option.click();

如何做到这一点？

let select = document.getElementById("select");
select.addEventListener("change", changeSelection);

function changeSelection() {
  console.log("Clicked");
}

let option = select.querySelector(`option[value="3"]`);
option.click();

<select id="select">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

答案1

得分: 3

元素中的选项存在的问题是它们是“窗口化”元素，与它们一起工作确实会有问题。

通常，如果您要选择一个选项，要么设置

的值，要么如果是多选，则设置选项的selected属性。由于设置值不会触发change事件，您需要手动触发它。

单选

let select = document.getElementById("select");
select.addEventListener("change", changeSelection);

function changeSelection() {
  console.log("Clicked", this.value);
}

select.value = 3;
select.dispatchEvent(new Event('change'));

<select id="select">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

多选

let select = document.getElementById("select");
select.addEventListener("change", changeSelection);

function changeSelection() {
  const values = Array.from(this.querySelectorAll("option:checked")).map(opt => opt.value);
  console.log("Clicked", values);
}

var opts = select.querySelectorAll("option");
opts[0].selected = true;
opts[2].selected = true;

select.dispatchEvent(new Event('change'));

<select id="select" multiple="multiple">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

英文:

The problem with option in a select is they are a "windowed" element and you really have issue working with them.

Typically if you want to select an option either you set the value of the select or if it is multiple select, set the selected attributes of the options. Since setting the value does not trigger change events, you would need to manually trigger it.

Single Select

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let select = document.getElementById("select");
select.addEventListener("change", changeSelection);

function changeSelection() {
  console.log("Clicked", this.value);
}

select.value = 3;
select.dispatchEvent(new Event('change'));

<!-- language: lang-html -->

<select id="select">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<!-- end snippet -->

Multiple select

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let select = document.getElementById("select");
select.addEventListener("change", changeSelection);

function changeSelection() {
  const values = Array.from(this.querySelectorAll("option:checked")).map(opt => opt.value);
  console.log("Clicked", values);
}


var opts = select.querySelectorAll("option");
opts[0].selected = true;
opts[2].selected = true;

select.dispatchEvent(new Event('change'));

<!-- language: lang-html -->

<select id="select" multiple="multiple">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<!-- end snippet -->

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

点赞

https://go.coder-hub.com/75545276.html 复制链接 复制链接

• 本文由 huangapple 发表于 2023年2月23日 21:08:49
• 转载请务必保留本文链接：https://go.coder-hub.com/75545276.html

• javascript

如何在JavaScript中从aaa数组中创建一个对象？

go 72 02/24

Can't use any methods of an istance of a third-party modules [chess.js] (ELECTRON – preload.js & render.js problem)

go 86 01/08

crawlee – 如何将相同的URL添加回请求队列

go 76 01/09

如何在Turborepo中为类型添加内部包？

go 108 04/11

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论

匿名网友

确定

昵称