CODEWITHSUNDEEP
javascripthtmldom-eventsgetelementsbyclassname
Branden
Branden

Reputation: 326

Use Javascript to click tricky Select HTML element

I am trying to click around using Javascript in the Console (Chrome) on a Kelley Blue Book page, but am getting stuck on the first select element, the "make" dropdown. The end goal is to select a make and model then hit the next button.

Here is what the HTML looks like (took out some of the options):

    <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>

I have tried the following JS commands,

click div with class:

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

click div with class:

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

set select element value:

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

Upvotes: 0

Views: 1145

Answers (1)

connexo
connexo

Reputation: 56783

You cannot "open" a select element by programmatically clicking it.

You can set the value of a select programmatically.

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>

Upvotes: 2

Related Questions