Use Javascript to click tricky Select HTML element

Question

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

Welcome to StackOverflow - Please read our How to Ask page and edit your question to improve it. Good questions tend to receive quicker, better answers from the community. For starters, please include a minimal reproducible example to your question. Otherwise, it might take a lot more time and a heap of guessing to figure exactly where the issue lies. — blurfus
– blurfus, Commented Apr 17, 2020 at 4:28

connexo · Accepted Answer · 2020-04-17 05:34:35Z

2

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>

edited Apr 17, 2020 at 5:34

answered Apr 17, 2020 at 5:12

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lhoro Over a year ago

getElementsByClassName can handle multiple class names. It's true programmatically click on select element won't work.

Branden Over a year ago

Thanks for your answer. I have tried your code. What actually shows in the select element on the page doesn't change. It still says "Make". If I ask for the value it in the console it says "Alfa Romeo" however. What is going on here?

connexo Over a year ago

@lhoro Thanks for the heads up. Wasn't aware of that.

connexo Over a year ago

@Branden Seeing the class name part StyledHiddenSelect on it, I assume what you are seeing in the browser is no longer the native select element. Try to inspect it using the developer tools of your browser. It seems your page has some Javascript that hides the native select element (most sites do this because they cannot accept the non-styleability of the native select element) and instead puts a replacement structure in place that only looks like a select element.

Collectives™ on Stack Overflow

Use Javascript to click tricky Select HTML element

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related