英文:
How to simulate option selection? click() doesn't work
问题
我想模拟用户单击某个选项，所以我使用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();
如何做到这一点？
英文:
I want to simulate a user click on certain option, so I use click() on the <option> but it doesn't work:
<!-- 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");
}
let option = select.querySelector(`option[value="3"]`);
option.click();
<!-- language: lang-html -->
<select id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<!-- end snippet -->
How can I do it?
答案1
得分: 3
通常，如果您要选择一个选项，要么设置
单选
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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论