使用JavaScript单击棘手的选择HTML元素

Question

[我试图在Kelley Blue Book page的控制台（Chrome）中使用Javascript单击，但是卡在第一个选择元素“ make”下拉菜单上。我想单击并选择选项之一。

这是HTML的外观（删除一些选项）：

    <div class="make">
         <div class="css-k9vu0d-SelectWrapper-body-VehiclePickerInput e1019m8z0" id="">
               <select class="css-1qn61q8-StyledHiddenSelect e1euwze60">
                        <option selected="" value="" disabled="">BMW</option><option value="Acura">Acura</option>
                        <option value="Alfa Romeo">Alfa Romeo</option>
                        <option value="Aston Martin">Aston Martin</option> 
                </select>
          <div width="auto" tabindex="-1" class="css-7kga7i-StyledSelect efry5w70">
            <div class="css-19v4425-MainDisplay efry5w71">
            <div class="css-erfxdy-ValueDisplay efry5w72">
                 <div class="css-1fx1pq8-EmptyPlaceholder efry5w75">Make</div></div>
                 <div class="css-196vjd2-Carot efry5w78">
          <div class="css-armdrj-StyledDropdownMenu eq7efy70">
                <div disabled="" class="css-crz4ue-StyledOption eq7efy71">Make</div>
                <div data-value="Acura" class="css-u49v6v-StyledOption eq7efy71">Acura</div>
                <div data-value="Alfa Romeo" class="css-u49v6v-StyledOption eq7efy71">Alfa Romeo</div>
                <div data-value="Aston Martin" class="css-u49v6v-StyledOption eq7efy71">Aston Martin</div>

我尝试了以下JS命令，

单击带有类的div：

document.getElementsByClassName('css-k9vu0d-SelectWrapper-body-VehiclePickerInput e1019m8z0')[0].click()

单击带有类的div：

document.getElementsByClassName('css-1qn61q8-StyledHiddenSelect e1euwze60')[0].click()

设置选择元素值：

document.getElementsByClassName('css-1qn61q8-StyledHiddenSelect e1euwze60')[0].selectedIndex = 6

Answer 1

您不能将多个类名传递给getElementsByClassName。

[您不能通过编程单击“打开” select元素。

您可以以编程方式设置选择的值。

const select = document.querySelector('.css-1qn61q8-StyledHiddenSelect.e1euwze60');

select.value = "Alfa Romeo";

<select class="css-1qn61q8-StyledHiddenSelect e1euwze60">
  <option selected="" value="" disabled="">BMW</option>
  <option value="Acura">Acura</option>
  <option value="Alfa Romeo">Alfa Romeo</option>
  <option value="Aston Martin">Aston Martin</option>
</select>