如何从 Web 浏览器开发人员工具中选择带有 Javascript 的选项答案

【问题标题】：How to select option with Javascript from web browser developer tools如何从 Web 浏览器开发人员工具中选择带有 Javascript 的选项
【发布时间】：2018-03-28 06:30:55
【问题描述】：

我正在尝试使用 Javascript 从浏览器开发人员工具的下拉菜单中选择所需的值。下图为页面内容。

但是每当我使用代码选择另一个值然后单击保存按钮时，实际上并没有保存更改。当我用鼠标正常选择并单击保存按钮时，它会正常更改。

我尝试了以下内容。这些似乎改变了所选下拉菜单的值（我写代码时显示为 2），但之后无法保存。

1-document.getElementById('channel24g_ctrl')[2].selected = true

2-document.getElementById('channel24g_ctrl').options.selectedIndex = 2

3-document.getElementById('channel24g_ctrl').options[2].selected = true

4-document.getElementById('channel24g_ctrl').options[2].click()

5-document.getElementById('channel24g_ctrl').options[2].setAttribute("selected", "selected"); document.getElementById('channel24g_ctrl').options[1].removeAttribute("selected");

我可能已经尝试了上述组合的其他一些组合。只有第五个实际上使目标选项“被选中”，但单击保存按钮时它仍然不起作用。我不是 javascript 或 ember 方面的专家，但我之前在其他网站上做过类似的事情并取得了成功。那么问题可能出在 Ember 框架上？

我还能做什么？

【问题讨论】：

标签： javascript developer-tools

【解决方案1】：

document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected'

【讨论】：

似乎选择了第 11 个选项。但是保存按钮也不能用这个保存。
我试过的所有代码都在问题中。网站不是我的。我只是尝试通过小的 javascript 片段来操纵它的元素。

【解决方案2】：

显然，仅选择一个选项有时是不够的。选择选项后必须调用change() 才能应用更改。下面这段代码成功了：

document.getElementById('channel24g_ctrl').options[2].selected = true;
$(document.querySelector('#channel24g_ctrl')).change();
document.getElementById('wifi_wizard_save').click();

【讨论】：