Javascript 点击选项不会将其下拉 - Chrome 扩展

Question

我正在制作一个自动 chrome 扩展。 我需要在下拉列表中选择一个选项。 我用过

var element = document.getElementByClassName("className");
element.value = 1;

这会更改屏幕上的值，但不会触发 Web 应用程序，因为它是由鼠标单击触发的。 所以我尝试点击选项菜单，但是当我点击时选项没有下拉

element.click()

或者当我单击此类的父级时，它不会下拉。 我尝试按位置点击

let ele = document.elementsFromPoint(1,1)
for(let i=0;i<ele.length;i++){
    ele.click();
}

但这同样也不起作用。

下拉列表的html是：

<div class="css-1dbjc4n r-bnwqim">
  <select
    aria-label="Ay"
    data-focusable="true"
    class="r-30o5oe r-1niwhzg r-17gur6a r-1yadl64 r-jwli3a r-1loqt21 r-ubezar r-crgep1 r-1ny4l3l r-t60dpp r-iphfwy r-n072k1 r-vmopo1 r-c2syf2"
  >
    <option value="" aria-disabled="true" disabled="" class="r-yfoy6g"></option>
    <option value="1" class="r-yfoy6g">Ocak</option>
    <option value="2" class="r-yfoy6g">Şubat</option>
    <option value="3" class="r-yfoy6g">Mart</option>
    <option value="4" class="r-yfoy6g">Nisan</option>
    <option value="5" class="r-yfoy6g">Mayıs</option>
    <option value="6" class="r-yfoy6g">Haziran</option>
    <option value="7" class="r-yfoy6g">Temmuz</option>
    <option value="8" class="r-yfoy6g">Ağustos</option>
    <option value="9" class="r-yfoy6g">Eylül</option>
    <option value="10" class="r-yfoy6g">Ekim</option>
    <option value="11" class="r-yfoy6g">Kasım</option>
    <option value="12" class="r-yfoy6g">Aralık</option></select
  ><svg
    viewBox="0 0 24 24"
    class="r-111h2gw r-4qtqp9 r-yyyyoo r-50lct3 r-fdch1b r-dnmrzs r-633pao r-u8s1d r-zchlnj r-1plcrui r-1v2oles r-lrvibr"
  >
    <g>
      <path
        d="M20.207 8.147c-.39-.39-1.023-.39-1.414 0L12 14.94 5.207 8.147c-.39-.39-1.023-.39-1.414 0-.39.39-.39 1.023 0 1.414l7.5 7.5c.195.196.45.294.707.294s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.022 0-1.413z"
      ></path>
    </g>
  </svg>
</div>

有没有办法模拟鼠标点击下拉选项菜单？ 我不想使用 Selenium 或 AHK，因为我已经开发这个扩展很长时间了。 提前致谢

Answer 1

如果你只是想改变选择输入的状态，你可以使用下面的

通过更改索引选择您想要的任何元素

 const index = 2;
 document.getElementsByTagName("select")[0].options[index].selected = true