从 Firefox/Chrome 控制台动态更改表单输入答案

【问题标题】：Dynamically change form input from Firefox/Chrome console从 Firefox/Chrome 控制台动态更改表单输入
【发布时间】：2016-05-20 16:02:14
【问题描述】：

我现在正在学习 javascript（使用浏览器的 firebug 控制台）并且在我输入命令时无法理解如何激活更改。

例如，一个网站的下拉框名称为“mvprodvaronetimeorder”，其中包含多个选项，例如： IpA-Q-Q, IpQ-Q-Q, Ipw-Q-Q...我可以使用命令来获得第三个值：

    document.getElementsByName("mvprodvaronetimeorder")[0].value="Ipg-Q-Q";

但是，当我从下拉框中选择相应的值时，它不会激活相同的操作（显示另一个下拉列表以供选择）。然后我不能与第二个下拉框和其他东西交互。

当我尝试使用以下命令填充文本框时，也会发生同样的事情：

            document.getElementById("luckyme")[0].value="You are lucky";

虽然它发生了变化，但当我单击提交按钮时更改并未反映，它要求我复制粘贴或至少单击该文本框以激活更改。

有没有人可以建议我如何从控制台自动化流程？

【问题讨论】：

【解决方案1】：

在 JavaScript 中分配值会更新选择，但不会通知在该页面上运行的代码更改。

要使页面对更改做出反应，您还需要在下拉菜单上触发更改事件：

var el = document.getElementsByName("mvprodvaronetimeorder")[0];
el.value = "Ipg-Q-Q"
el.dispatchEvent(new Event("change"))

然后页面知道选择已更改，并在下方显示新的下拉菜单。

要找出元素正在监听的事件，您可以使用getEventListeners：

getEventListeners(document.getElementsByName("mvprodvaronetimeorder")[0])
// Object {change: Array[1]}

【讨论】：