javascript - 使用浏览器控制台选择网页表格中的下拉框

Question

首先，这是我在 VBA 之外的第一个项目，我认为这会很容易......也许不是。

我们有一个客户网站，需要在其中填写表格。只需从下拉菜单中选择"is"，就会有 400 多行。除了 session 版本之外，我没有任何能力更改 HTML 代码。是否可以使用浏览器内控制台来识别 HTML 元素并选择某个选项？下面的表格代码显示了需要更改的内容，以及我之前尝试过的版本。浏览器控制台只是对我尝试的内容显示“未定义”。

<select class="row" id="17.5.1" style="width:350px;font-family:Segoe UI;font-size:13px;" onchange="OnChangeElement(id)"><option></option><option selected="">Yes</option><option>No</option><option>NA</option></select>

我在控制台中尝试过的，众多变体之一

function loop(tested){
var i;
for(i=1; i<20; i++){
//HTMLSelectElement("17.5.1");
//select.getOptionByValue("No");
//select.setSelectedAttribute(option, true);
$("17.5.1").getOptionByValue('No').setSelectedAttribute(option, true);
}
}

我几乎不懂java...所以如果我不知道更多，我很抱歉。

谢谢!!

Answer 1

首先，您需要选择所有 <select>文档中的元素。

const selects = document.querySelectorAll('select');

然后循环遍历每个选择元素以操作每个 <select>标签。在下面的示例中，单数 select Constant 是我们正在循环的当前选择元素。

for (const select of selects) {
  ...
}

然后在循环内您将希望看到 options每个select元素，这样我们就可以看到哪些元素具有您正在查找的值。首先转换 HTMLOptionsCollection 再次循环所有选项。 ，这是一个具有所有选项的对象，到一个数组并检查 value 是否属性等于您尝试设置的值。这样你就不会意外地在错误的 <select> 上设置错误的值。元素。如果有该值，请直接在选择元素上设置该值。

for (const select of selects) {
  const { options } = select;
  const hasValue = Array.from(options).some((option) => option.textContent === 'Yes');
  if (hasValue) {
    select.value = 'Yes';
  }
}

或者当您只需通过 id 选择单个元素时，请使用:

const select = document.getElementById('17.5.1');
const { options } = select;
const hasValue = Array.from(options).some((option) => option.textContent === 'Yes');
if (hasValue) {
  select.value = 'Yes';
}